import styled from '@emotion/styled';
import { useRouter } from 'next/navigation';
import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import {
  SearchInput,
  SearchInputWrapper,
} from '@/components/clipBrowser/FilterElements';
import { WorkspaceList } from '@/components/clipBrowser/WorkspaceList';
import CreateProjectModal from '@/components/modal/CreateProjectModal';
import useDebounceCallback from '@/hooks/useDebounceCallback';
import useDisclosure from '@/hooks/useDisclosure';
import usePlaybar from '@/hooks/usePlaybar';
import { useSearchInput } from '@/hooks/useSearchInput';
import { PlusIcon, SearchIcon } from '@/icons';
import { Project, ProjectMetadataSchema } from '@/state/projectStore';

import { useWorkspaces } from '../../chat/useWorkspaces';

const WorkspaceListWrapper = styled.div<{ padBottom?: boolean }>`
  overflow-y: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-direction: column;
  > * {
    padding: 0 16px;
  }
  padding-bottom: ${(props) => (props.padBottom ? '106px' : '16px')};
`;

const WorkspaceListFilters = ({
  searchText,
  setSearchText,
  onOpenCreateProjectModal,
}: {
  searchText: string;
  setSearchText: Dispatch<SetStateAction<string>>;
  onOpenCreateProjectModal: () => void;
}) => {
  const { localSearchText, setLocalSearchText, searchInputProps } =
    useSearchInput(searchText);

  const debouncedSetSearchText = useDebounceCallback(
    (value: string) => setSearchText(value),
    150
  );

  return (
    <div className='flex flex-row items-center gap-4 px-4 py-4'>
      <div className='flex-1'>
        <SearchInputWrapper>
          <SearchIcon className='h-6 w-6' />
          <SearchInput
            {...searchInputProps}
            placeholder='Search'
            value={localSearchText}
            onChange={(e) => {
              setLocalSearchText(e.target.value);
              debouncedSetSearchText(e.target.value);
            }}
          />
        </SearchInputWrapper>
      </div>
      <Button
        shape={ButtonShape.Pill}
        size={ButtonSize.Small}
        variant={ButtonVariant.Standard}
        iconStart={PlusIcon}
        onClick={onOpenCreateProjectModal}
      >
        New Workspace
      </Button>
    </div>
  );
};

export default function LibraryV2Workspaces() {
  const router = useRouter();
  const playbar = usePlaybar();
  const { project: projectStore } = useStores();
  const [isCreatingNewWorkspace, setIsCreatingNewWorkspace] = useState(false);
  const workspaceListWrapperRef = useRef<HTMLDivElement>(null);

  const {
    query: workspacesQuery,
    workspaces,
    searchText: projectsSearchText,
    setSearchText: setProjectsSearchText,
    numTotalWorkspaces,
    archiveWorkspace,
    unarchiveWorkspace,
  } = useWorkspaces();

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

  const handleSelectProject = useCallback(
    (project: ProjectMetadataSchema) => {
      router.push(`/create/v2?wid=${project.id}`);
      projectStore.setUserSelectedProjectId(project.id, project.name);
    },
    [router, projectStore]
  );

  return (
    <div className='flex h-full flex-col'>
      <WorkspaceListFilters
        searchText={projectsSearchText}
        setSearchText={setProjectsSearchText}
        onOpenCreateProjectModal={onOpenCreateProjectModal}
      />
      <WorkspaceListWrapper
        padBottom={playbar.isPlaying}
        ref={workspaceListWrapperRef}
      >
        <WorkspaceList
          isCreatingNewWorkspace={isCreatingNewWorkspace}
          setIsCreatingNewWorkspace={setIsCreatingNewWorkspace}
          isSearching={workspacesQuery.isFetching}
          onCreateNewWorkspace={() => {
            setIsCreatingNewWorkspace(true);
            workspaceListWrapperRef.current?.scrollTo({ top: 0 });
          }}
          onOpenCreateProjectModal={onOpenCreateProjectModal}
          projects={workspaces}
          numTotalProjects={numTotalWorkspaces}
          onSelectProject={handleSelectProject}
          onLoadNextPage={workspacesQuery.fetchNextPage}
          archiveWorkspace={archiveWorkspace}
          unarchiveWorkspace={unarchiveWorkspace}
        />
      </WorkspaceListWrapper>
      <CreateProjectModal
        project={projectStore}
        isOpen={isCreateProjectModalOpen}
        onClose={onCloseCreateProjectModal}
        onProjectCreated={(newProject: Project) => {
          handleSelectProject(newProject as any as ProjectMetadataSchema);
        }}
      />
    </div>
  );
}