import { FiltersMap, TransitionState } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import React, { useRef, useState } from 'react';
import { SwitchTransition } from 'react-transition-group';
import { Box, Divider } from '@wix/design-system';
import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
import { CollectionSearch } from '../CollectionSearch';
import { EditorXLogo } from '../EditorXLogo';
import { WixLogo } from '../WixLogo';
import { PickerStandaloneLayoutTitles } from './PickerStandaloneLayoutTitles';
import { Collapse } from '../Collapse';
import { Fade } from '../Fade';
import { PickerStandaloneState } from '../../state';
import { ExpandableSearch } from '../ExpandableSearch';

export interface PickerStandaloneLayoutHeaderProps<
  T,
  F extends FiltersMap = FiltersMap,
> {
  state: PickerStandaloneState<T, F>;
  hideSearch?: boolean;
}

function _PickerStandaloneLayoutHeader<T, F extends FiltersMap = FiltersMap>(
  props: PickerStandaloneLayoutHeaderProps<T, F>,
) {
  const { state, hideSearch } = props;

  const { picker, logoType, isMobileView, isDuringSearch } = state;

  const { collection, isScrollTop } = picker;

  const searchRef = useRef<HTMLInputElement | null>();

  const onSearchFocus = () => {
    state.setIsDuringSearch(true);
  };

  const onSearchBlur = () => {
    if (collection.query.search.isEmpty) {
      state.setIsDuringSearch(false);
    }
  };

  const onBackClicked = async () => {
    searchRef.current?.focus();
    await collection.clearSearch();
    searchRef.current?.blur();
  };

  const {
    headerProps,
    header,
    headerDivider,
    titleSearchContainerProps,
    titleDivider,
  } = isMobileView
    ? {
        headerProps: {
          padding: '12px 24px',
          align: 'space-between' as const,
        },
        header: (
          <>
            <SwitchTransition>
              <Fade timeout={150} key={isDuringSearch ? 1 : 0}>
                <div style={{ display: 'flex' }}>
                  {isDuringSearch ? (
                    <ChevronLeftLarge
                      height={24}
                      width={24}
                      onClick={onBackClicked}
                      style={{ cursor: 'pointer' }}
                    />
                  ) : (
                    <Box
                      align="center"
                      verticalAlign="middle"
                      boxSizing="border-box"
                    >
                      {logoType === 'editorx' ? (
                        <EditorXLogo height={16} />
                      ) : (
                        <WixLogo height={16} />
                      )}
                    </Box>
                  )}
                </div>
              </Fade>
            </SwitchTransition>
            <ExpandableSearch
              visibility={hideSearch ? 'hidden' : undefined}
              expandable
              onBlur={onSearchBlur}
              onFocus={onSearchFocus}
              inputRef={(input) => {
                searchRef.current = input;
              }}
            />
          </>
        ),
        headerDivider: undefined,
        titleSearchContainerProps: {
          paddingBottom: !isScrollTop && !collection.result.isEmpty ? 0 : 'SP2',
        },
        titleDivider: !isScrollTop && !collection.result.isEmpty && (
          <Box
            margin="0 15px"
            height="12px"
            boxShadow="0 5px 5px -5px rgb(32 48 60 / 20%)"
            zIndex={9999999}
          />
        ),
      }
    : {
        headerProps: {
          padding: '24px 30px',
          align: 'center' as const,
        },
        header: (
          <Box align="center" verticalAlign="middle" boxSizing="border-box">
            {logoType === 'editorx' ? (
              <EditorXLogo height={18} />
            ) : (
              <WixLogo height={24} />
            )}
          </Box>
        ),
        headerDivider: <Divider />,
        titleSearchContainerProps: {
          paddingTop: 'SP4',
          paddingBottom: 'SP3',
          gap: 'SP3',
        },
        titleDivider: !hideSearch && (
          <Box
            display="flex"
            direction="vertical"
            paddingLeft="94px"
            paddingRight="94px"
          >
            <CollectionSearch minWidthPixels="100%" />
          </Box>
        ),
      };

  const [collapse] = useState(() => new TransitionState(true));

  return (
    <>
      <Box
        direction="horizontal"
        boxSizing="border-box"
        verticalAlign="middle"
        {...headerProps}
      >
        {header}
      </Box>
      {headerDivider}
      <Box display="grid" direction="vertical" {...titleSearchContainerProps}>
        <Collapse state={collapse} in={!isDuringSearch} timeout={300}>
          <Fade in={!isDuringSearch} timeout={300}>
            <PickerStandaloneLayoutTitles {...props} />
          </Fade>
        </Collapse>
        {titleDivider}
      </Box>
    </>
  );
}
export const PickerStandaloneLayoutHeader = observer(
  _PickerStandaloneLayoutHeader,
);