import React, { useCallback } from 'react';
import FocusTrap from 'focus-trap-react';
import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
import { IGif } from '@giphy/js-types';
import { Box, color, config } from 'folds';
import { useSetting } from '../state/hooks/settings';
import { settingsAtom } from '../state/settings';

const PICKER_WIDTH = 312;

type GifPickerInnerProps = {
  onSelect: (url: string, width: number, height: number) => void;
  requestClose: () => void;
  lotusTerminal: boolean;
};

function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
  const { fetchGifs, searchKey } = React.useContext(SearchContext);

  const handleClick = useCallback(
    (gif: IGif, e: React.SyntheticEvent) => {
      e.preventDefault();
      const r = gif.images.downsized ?? gif.images.original;
      const { url } = r;
      const width = Number(r.width) || 200;
      const height = Number(r.height) || 200;
      onSelect(url, width, height);
      requestClose();
    },
    [onSelect, requestClose],
  );

  return (
    <Box direction="Column" style={{ width: `${PICKER_WIDTH}px` }}>
      {lotusTerminal && (
        <div
          style={{
            padding: '5px 10px 4px',
            borderBottom: '1px solid color-mix(in srgb, var(--lt-accent-orange) 20%, transparent)',
            fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
            fontSize: '10px',
            fontWeight: 700,
            letterSpacing: '0.1em',
            color: 'var(--lt-accent-orange)',
            userSelect: 'none',
          }}
        >
          {'// GIF_SEARCH'}
        </div>
      )}
      <Box style={{ padding: '8px 8px 4px' }}>
        <div style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }}>
          <SearchBar />
        </div>
      </Box>
      <div
        style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}
      >
        <Grid
          key={searchKey}
          fetchGifs={fetchGifs}
          width={PICKER_WIDTH - 16}
          columns={2}
          gutter={4}
          onGifClick={handleClick}
          hideAttribution={false}
          noLink
        />
      </div>
    </Box>
  );
}

type GifPickerProps = {
  apiKey: string;
  onSelect: (url: string, width: number, height: number) => void;
  requestClose: () => void;
};

export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

  const containerStyle = lotusTerminal
    ? {
        background: 'var(--lt-bg-secondary)',
        border: '1px solid color-mix(in srgb, var(--lt-accent-orange) 35%, transparent)',
        borderRadius: '4px',
        overflow: 'hidden',
        boxShadow:
          '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
        width: `${PICKER_WIDTH}px`,
      }
    : {
        background: color.Surface.Container,
        border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
        borderRadius: config.radii.R400,
        overflow: 'hidden',
        boxShadow: color.Other.Shadow,
        width: `${PICKER_WIDTH}px`,
      };

  return (
    <FocusTrap
      focusTrapOptions={{
        initialFocus: false,
        returnFocusOnDeactivate: false,
        onDeactivate: requestClose,
        clickOutsideDeactivates: true,
        allowOutsideClick: true,
      }}
    >
      <Box
        direction="Column"
        data-gif-terminal={lotusTerminal ? '' : undefined}
        style={containerStyle}
      >
        <SearchContextManager apiKey={apiKey} initialTerm="">
          <GifPickerInner
            onSelect={onSelect}
            requestClose={requestClose}
            lotusTerminal={!!lotusTerminal}
          />
        </SearchContextManager>
      </Box>
    </FocusTrap>
  );
}