import { useState } from 'react';

import { type IGif } from '@giphy/js-types';
import { Grid } from '@giphy/react-components';
import { IconGif } from '@material-hu/icons/tabler';
import Dialog from '@material-hu/mui/Dialog';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
import Typography from '@material-hu/mui/Typography';

import HuTooltip from '@material-hu/components/design-system/Tooltip';
import { type TooltipProps } from '@material-hu/components/design-system/Tooltip/types';

import PoweredByGiphyLogo from 'src/assets/images/poweredByGiphy.webp';
import useGifSearch from 'src/hooks/useGifSearch';
import useHuGoTheme from 'src/hooks/useHuGoTheme';

import SearchBar from 'src/components/search/SearchBar';

type Props = Pick<TooltipProps, 'direction'> & {
  onGifSelection?: (gif: IGif) => void;
  title: string;
  iconColor: string;
  disabled?: boolean;
  onlyIcon?: boolean;
  disableTooltip?: boolean;
};

/**
 * @deprecated This component does not implement Hugo's design system.
 */
const FormGif = ({
  onGifSelection,
  title,
  direction = 'bottom',
  iconColor,
  disabled,
  onlyIcon = false,
  disableTooltip = false,
}: Props) => {
  const [openModal, setOpenModal] = useState(false);
  const HugoThemeProvider = useHuGoTheme();

  const handleClose = () => {
    resetQuery();
    setOpenModal(false);
  };

  const {
    query,
    searchTerm,
    fetchGifs,
    handleSelectGif,
    handleQueryChange,
    resetQuery,
    t,
  } = useGifSearch({
    onGifSelection,
    onClose: handleClose,
  });

  const handleOpen = () => setOpenModal(true);

  return (
    <HugoThemeProvider>
      <Dialog
        open={openModal}
        onClose={handleClose}
      >
        <DialogTitle sx={{ px: 2 }}>
          <Typography
            variant="globalM"
            fontWeight="fontWeightSemiBold"
            sx={{ mb: 1 }}
          >
            {t('select_gif')}
          </Typography>
          <SearchBar
            placeholder={t('search_gif')}
            inputProps={{ maxLength: 50 }}
            sx={{
              mx: 0,
              px: 0,
              border: theme =>
                `1px solid ${theme.palette.new.border.neutral.default}`,
              borderRadius: 1,
            }}
            query={query}
            onChange={handleQueryChange}
            withoutDivider
          />
        </DialogTitle>
        <DialogContent
          sx={{ height: '300px', minWidth: '490px', px: 2, mb: 2 }}
        >
          <img
            src={PoweredByGiphyLogo}
            style={{ marginBottom: '10px' }}
            alt="Powered by Giphy"
          />
          <Grid
            hideAttribution
            noResultsMessage={
              <Typography>
                {t('gif_not_found', { search: searchTerm })}
              </Typography>
            }
            width={490}
            onGifClick={handleSelectGif}
            columns={4}
            borderRadius={0}
            key={searchTerm}
            fetchGifs={fetchGifs}
          />
        </DialogContent>
      </Dialog>
      <HuTooltip
        title={title}
        direction={direction}
        disableTooltip={disableTooltip}
      >
        <span>
          <IconButton
            aria-label={t('attach_gif')}
            onClick={handleOpen}
            variant="tertiary"
            disabled={disabled}
            sx={{
              ...(onlyIcon && {
                p: 0,
                '&:hover': { backgroundColor: 'transparent' },
              }),
            }}
          >
            <IconGif
              color={iconColor}
              fontSize="medium"
            />
          </IconButton>
        </span>
      </HuTooltip>
    </HugoThemeProvider>
  );
};

export default FormGif;