import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';
import {
  Dispatch,
  SetStateAction,
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { useWorkspaces } from '@/app/(root)/chat/useWorkspaces';
import { HeaderContainer } from '@/app/(root)/create/createV2/componentsQ3/CreateHeader';
import { useContextSelector } from '@/hooks/useContextSelector';
import useDisclosure from '@/hooks/useDisclosure';
import { ExtendLeftIcon, ExtendRightIcon, LibraryIcon } from '@/icons';
import { Project, ProjectMetadataSchema } from '@/state/projectStore';

import CreateProjectModal from '../modal/CreateProjectModal';
import NowPlayingSection from '../studio/NowPlayingSection';
import PanelButton from '../studio/PanelButton';
import StudioContext from '../studio/StudioContext';
import StudioProjectListView from '../studio/StudioProjectListView';
import StudioUploadIndicator from '../studio/StudioUploadIndicator';
import ClipBrowserList from './ClipBrowserList';
import StudioClipListHeader from './StudioClipListHeader';
import { VirtualizedStudioClipRow } from './StudioClipRow';
import StudioFilters from './StudioFilters';
import { WorkspaceList } from './WorkspaceList';
import { setSearchText } from './filterActions';
import { ClipBrowserContext } from './useClipBrowser';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`;

const StudioClipBrowser = observer(function StudioClipBrowser({
  expanded,
  setExpanded,
  setAllSongs,
}: {
  expanded: boolean;
  setExpanded?: Dispatch<SetStateAction<boolean>>;
  setAllSongs: Dispatch<SetStateAction<boolean>>;
}) {
  const [view, setView] = useState<
    'workspace' | 'workspace-list' | 'studio-sessions' | 'all-songs'
  >('workspace');

  const showWorkspaceList = view === 'workspace-list';
  const showStudioSessions = view === 'studio-sessions';
  const showAllSongs = view === 'all-songs';

  // const { onOpen: onOpenCreateProjectModal } = useDisclosure();
  const { project: projectStore } = useStores();
  const {
    query: workspacesQuery,
    workspaces,
    setSearchText: setProjectsSearchText,
    numTotalWorkspaces,
    archiveWorkspace,
    unarchiveWorkspace,
  } = useWorkspaces();

  const handleSelectProject = useCallback(
    (project: ProjectMetadataSchema) => {
      projectStore.setUserSelectedProjectId(project.id, project.name);
      setView('workspace');
    },
    [setView]
  );

  const onBackClick = useCallback(() => {
    setView((prev) => {
      if (prev === 'workspace') {
        return 'workspace-list';
      } else if (prev === 'workspace-list') {
        return 'workspace';
      } else if (prev === 'studio-sessions') {
        return 'workspace-list';
      } else if (prev === 'all-songs') {
        return 'workspace-list';
      }

      return 'workspace';
    });
  }, []);

  const previewingOffTimeline = useContextSelector(
    StudioContext,
    (ctx) => ctx.previewController.previewingOffTimeline
  );

  const clipSearchText = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.searchText
  );
  const setClipFilters = useContextSelector(
    ClipBrowserContext,
    (context) => context.setFilters
  );

  const [workspaceSearchText, setWorkspaceSearchTextState] = useState('');

  const setWorkspaceSearchText = useCallback(
    async (value: string) => {
      setWorkspaceSearchTextState(value);
      setProjectsSearchText(value);
    },
    [setProjectsSearchText]
  );

  const setClipSearchText = useCallback(
    (value: string) => {
      setClipFilters(setSearchText(value));
    },
    [setClipFilters]
  );

  const [studioProjectSearchText, setStudioProjectSearchText] = useState('');

  useEffect(() => {
    if (view === 'all-songs') {
      setAllSongs?.(true);
    } else if (view === 'workspace') {
      setAllSongs?.(false);
    }
  }, [view, setAllSongs]);

  const {
    isOpen: isCreateProjectModalOpen,
    onOpen: onOpenCreateProjectModal,
    onClose: onCloseCreateProjectModal,
  } = useDisclosure();

  const [isCreatingNewWorkspace, setIsCreatingNewWorkspace] = useState(false);
  const workspaceListWrapperRef = useRef<HTMLDivElement>(null);

  return (
    <Wrapper>
      <>
        {
          <CreateProjectModal
            project={projectStore}
            isOpen={isCreateProjectModalOpen}
            onClose={onCloseCreateProjectModal}
            onProjectCreated={(newProject: Project) => {
              workspacesQuery.refetch();
              handleSelectProject(newProject as any as ProjectMetadataSchema);
            }}
          />
        }
        {!expanded ? (
          <HeaderContainer borderBottom slim center className='mb-2'>
            <PanelButton
              Icon={LibraryIcon}
              HoverIcon={ExtendRightIcon}
              enabled={!!setExpanded}
              onClick={() => setExpanded?.(true)}
              className='h-[40px] text-[12px]'
            />
          </HeaderContainer>
        ) : (
          <>
            <StudioClipListHeader
              inWorkspace={
                !showWorkspaceList && !showStudioSessions && !showAllSongs
              }
              inAllSongs={showAllSongs}
              onBackClick={onBackClick}
              searchText={
                showStudioSessions
                  ? studioProjectSearchText
                  : showWorkspaceList
                    ? workspaceSearchText
                    : clipSearchText
              }
              setSearchText={
                showStudioSessions
                  ? setStudioProjectSearchText
                  : showWorkspaceList
                    ? setWorkspaceSearchText
                    : setClipSearchText
              }
              leftSideContent={
                <PanelButton
                  Icon={LibraryIcon}
                  HoverIcon={ExtendLeftIcon}
                  enabled={!!setExpanded}
                  onClick={() => setExpanded?.(false)}
                />
              }
            />
          </>
        )}

        {showStudioSessions ? (
          <>
            {expanded && (
              <StudioProjectListView
                searchText={studioProjectSearchText}
                onClose={() => {
                  setView('workspace');
                }}
              />
            )}
          </>
        ) : showWorkspaceList ? (
          expanded && (
            <>
              <div
                className='h-full min-h-0 w-full overflow-auto px-2'
                ref={workspaceListWrapperRef}
              >
                <WorkspaceList
                  isCreatingNewWorkspace={isCreatingNewWorkspace}
                  setIsCreatingNewWorkspace={setIsCreatingNewWorkspace}
                  onSelectStudioSessions={() => {
                    setView('studio-sessions');
                  }}
                  onSelectAllSongs={() => {
                    setView('all-songs');
                  }}
                  onCreateNewWorkspace={() => {
                    setIsCreatingNewWorkspace(true);
                    workspaceListWrapperRef.current?.scrollTo({ top: 0 });
                  }}
                  isSearching={workspacesQuery.isFetching}
                  compact
                  onSelectProject={handleSelectProject}
                  onLoadNextPage={workspacesQuery.fetchNextPage}
                  projects={workspaces}
                  numTotalProjects={numTotalWorkspaces}
                  onOpenCreateProjectModal={onOpenCreateProjectModal}
                  archiveWorkspace={archiveWorkspace}
                  unarchiveWorkspace={unarchiveWorkspace}
                />
              </div>
            </>
          )
        ) : (
          <>
            {expanded && <StudioFilters />}
            {expanded && <StudioUploadIndicator />}
            <ClipBrowserList
              ListComponent={VirtualizedStudioClipRow}
              hideScrollbar={!expanded}
              hidePageControls={!expanded}
            />
          </>
        )}
      </>
      {expanded && previewingOffTimeline && <NowPlayingSection dark />}
    </Wrapper>
  );
});

export default StudioClipBrowser;