import IconReset from '@mui/icons-material/RotateLeft';
import {
  Button,
  ClickAwayListener,
  MenuItem,
  Paper,
  Popper,
  type PopperPlacementType,
  useTheme
} from '@mui/material';

import { find, isNil, pipe, propEq, reject } from 'ramda';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';

import { IconButton } from '../../..';
import type { SelectEntry } from '..';
import Option from '../Option';
import { labelReset } from './translatedLabels';

const useStyles = makeStyles()((theme) => ({
  button: {
    fontSize: theme.typography.caption.fontSize
  }
}));

interface Props {
  icon: JSX.Element;
  onChange: (updatedValues: Array<SelectEntry>) => void;
  onReset?: () => void;
  options: Array<SelectEntry>;
  popperPlacement?: PopperPlacementType;
  title: string;
  value: Array<SelectEntry>;
}

const IconPopoverMultiAutocomplete = ({
  icon,
  options,
  title,
  onChange,
  value,
  onReset,
  popperPlacement = 'bottom-start'
}: Props): JSX.Element => {
  const theme = useTheme();
  const { classes } = useStyles();
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();

  const isOpen = Boolean(anchorEl);

  const close = (reason?: { type?: string }): void => {
    const isClosedByInputClick = reason?.type === 'mousedown';

    if (isClosedByInputClick) {
      return;
    }
    setAnchorEl(undefined);
  };

  const toggle = (event: React.MouseEvent): void => {
    if (isOpen) {
      close();

      return;
    }

    setAnchorEl(event.currentTarget as HTMLElement);
  };

  const isSelected = (id: number | string): boolean => {
    return pipe(find(propEq(id, 'id')), Boolean)(value);
  };

  const unSelect = (option: SelectEntry): void => {
    const { id } = option;

    const updatedValue = isSelected(id)
      ? reject(propEq(id, 'id'), value)
      : [...value, option];

    onChange(updatedValue);
  };

  return (
    <ClickAwayListener onClickAway={close}>
      <div>
        <IconButton
          ariaLabel={title}
          onClick={
            toggle as ((event: React.MouseEvent) => void) &
              React.MouseEventHandler<HTMLButtonElement>
          }
          size="large"
          title={title}
        >
          {icon}
        </IconButton>
        <Popper
          anchorEl={anchorEl}
          open={isOpen}
          placement={popperPlacement}
          style={{ zIndex: theme.zIndex.tooltip }}
        >
          <Paper>
            {!isNil(onReset) && (
              <Button
                className={classes.button}
                color="primary"
                fullWidth
                onClick={onReset}
                size="small"
                startIcon={<IconReset />}
              >
                {t(labelReset)}
              </Button>
            )}
            {options.map((option) => {
              const { id, name } = option;

              return (
                <MenuItem
                  disabled={option.disabled || false}
                  key={id}
                  onClick={(): void => unSelect(option)}
                  value={name}
                >
                  <Option checkboxSelected={isSelected(id)}>{name}</Option>
                </MenuItem>
              );
            })}
          </Paper>
        </Popper>
      </div>
    </ClickAwayListener>
  );
};

export default IconPopoverMultiAutocomplete;