import { type Result } from '@scrabble-solver/types';
import { type FunctionComponent, memo, useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';

import { Button } from '@/components/Button';
import { Dictionary } from '@/components/Dictionary';
import { Modal } from '@/components/Modal';
import { Results } from '@/components/Results';
import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
import Check from '@/icons/Check.svg';
import EyeFill from '@/icons/EyeFill.svg';
import {
  resultsSlice,
  selectResultCandidate,
  selectResultCandidateIndex,
  useTranslate,
  useTypedSelector,
} from '@/state';

import styles from './ResultsModal.module.scss';

interface Props {
  className?: string;
  isOpen: boolean;
  onClose: () => void;
}

const ResultsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
  const dispatch = useDispatch();
  const translate = useTranslate();
  const showResultsInModal = useIsCompactLayout();
  const previewsOnRepeatedClick = useIsTouchDevice();
  const resultCandidate = useTypedSelector(selectResultCandidate);
  const highlightedIndex = useTypedSelector(selectResultCandidateIndex);

  const callbacks = useMemo(
    () => ({
      onClick: (result: Result) => {
        if (previewsOnRepeatedClick && result === resultCandidate) {
          onClose();
        } else {
          dispatch(resultsSlice.actions.changeResultCandidate(result));
        }
      },
    }),
    [dispatch, onClose, previewsOnRepeatedClick, resultCandidate],
  );

  const handleInsert = () => {
    if (resultCandidate) {
      dispatch(resultsSlice.actions.applyResult(resultCandidate));
    }

    onClose();
  };

  const handlePreview = () => {
    onClose();
  };

  useEffect(() => {
    if (isOpen && !showResultsInModal) {
      onClose();
    }
  }, [isOpen, onClose, showResultsInModal]);

  return (
    <Modal
      className={className}
      footer={
        <>
          <Button
            aria-label={translate('results.insert')}
            disabled={!resultCandidate}
            Icon={Check}
            tooltip={translate('results.insert')}
            variant="primary"
            onClick={handleInsert}
          >
            {translate('results.insert')}
          </Button>

          <Button
            aria-label={translate('results.preview')}
            disabled={!resultCandidate}
            Icon={EyeFill}
            tooltip={translate('results.preview')}
            onClick={handlePreview}
          >
            {translate('results.preview')}
          </Button>
        </>
      }
      isOpen={isOpen}
      title={translate('results')}
      onClose={onClose}
    >
      <div className={styles.content}>
        <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
        <Dictionary className={styles.dictionary} />
      </div>
    </Modal>
  );
};

export const ResultsModal = memo(ResultsModalBase);