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 } 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.url;
      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 rgba(255,107,0,0.2)',
          fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
          fontSize: '10px',
          fontWeight: 700,
          letterSpacing: '0.1em',
          color: '#FF6B00',
          userSelect: 'none',
        }}>
          // GIF_SEARCH
        </div>
      )}
      <Box style={{ padding: '8px 8px 4px' }}>
        <SearchBar style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }} />
      </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: '#060c14',
        border: '1px solid rgba(255,107,0,0.35)',
        borderRadius: '4px',
        overflow: 'hidden',
        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
        width: `${PICKER_WIDTH}px`,
      }
    : {
        background: 'var(--bg-surface)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: '12px',
        overflow: 'hidden',
        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
        width: `${PICKER_WIDTH}px`,
      };

  return (
    <FocusTrap
      focusTrapOptions={{
        initialFocus: 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>
  );
}