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

import { HeaderContainer } from '@/app/(root)/create/createV2/componentsQ3/CreateHeader';
import { useContextSelector } from '@/hooks/useContextSelector';
import useDebounceCallback from '@/hooks/useDebounceCallback';
import { useSearchInput } from '@/hooks/useSearchInput';
import { ChevronLeftIcon, CloseIcon, SearchIcon } from '@/icons';
import { ALL_AURA_IMAGE_URLS } from '@/utils/constants';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import { SearchInput } from './FilterElements';
import { useWorkspace } from './WorkspaceHeader';
import { ClipBrowserContext } from './useClipBrowser';

const WorkspaceImage = styled.img`
  width: 24px;
  height: 24px;
  border-radius: 4px;
`;

export default observer(function StudioClipListHeader({
  inWorkspace,
  inAllSongs,
  onBackClick,
  leftSideContent,
  expanded = true,
  setSearchText,
  searchText,
}: {
  inWorkspace: boolean;
  inAllSongs: boolean;
  onBackClick?: () => void;
  leftSideContent?: React.ReactNode[] | React.ReactNode;
  expanded?: boolean;
  setSearchText: (value: string) => void;
  searchText: string;
}) {
  const { localSearchText, setLocalSearchText, searchInputProps } =
    useSearchInput(searchText);

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

  const workspaceId = useContextSelector(
    ClipBrowserContext,
    (context) => context.filters.workspace.workspaceId ?? undefined
  );

  const { data: workspace } = useWorkspace(workspaceId);

  const [searchMode, setSearchMode] = useState(false);

  if (!expanded) {
    return (
      <HeaderContainer borderBottom center slim>
        {leftSideContent}
      </HeaderContainer>
    );
  }

  return (
    <HeaderContainer borderBottom slim>
      {leftSideContent ?? <div className='h-8 w-8' />}
      {!searchMode && (
        <Button
          variant={ButtonVariant.Secondary}
          shape={ButtonShape.Pill}
          icon={<ChevronLeftIcon className='h-4 w-4' />}
          onClick={() => onBackClick?.()}
        >
          {inWorkspace && (
            <WorkspaceImage
              src={workspace?.image_url ?? ALL_AURA_IMAGE_URLS[1]}
            />
          )}
          {inWorkspace
            ? workspaceId
              ? workspace?.name || 'Unknown Workspace'
              : 'My Workspace'
            : inAllSongs
              ? 'All Songs'
              : 'Back'}
        </Button>
      )}
      {searchMode ? (
        <Button
          variant={ButtonVariant.Secondary}
          shape={ButtonShape.Pill}
          className='ml-2 grow-1 py-1 pr-1'
        >
          <SearchInput
            {...searchInputProps}
            autoFocus
            placeholder='Search'
            value={localSearchText}
            onChange={(e) => {
              setLocalSearchText(e.target.value);
              debouncedSetSearchText(e.target.value);
            }}
          />
          <Button
            variant={ButtonVariant.Tertiary}
            shape={ButtonShape.Pill}
            icon={<CloseIcon className='h-4 w-4' />}
            onClick={() => {
              setSearchMode(false);
              setSearchText('');
            }}
          />
        </Button>
      ) : (
        <Button
          shape={ButtonShape.Pill}
          className='mr-[1px] p-2.5'
          icon={<SearchIcon className='h-4 w-4' />}
          onClick={() => {
            setSearchMode(true);
            debouncedSetSearchText(localSearchText);
          }}
        />
      )}
    </HeaderContainer>
  );
});