/**
 * @deprecated Replace with `InputSelect` from `@material-hu/components/design-system/Inputs/Select`.
 * Note: this component is a custom enabled/disabled toggle button with a dropdown — not a plain select.
 * The status color logic (green/gray) and toggle behavior must be reimplemented in the consumer.
 */
import * as React from 'react';

import CircleIcon from '@material-hu/icons/material/Circle';
import IconButton from '@material-hu/mui/IconButton';
import Menu from '@material-hu/mui/Menu';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import { FormStatus } from 'src/types/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  isEnabled: boolean;
  handleToggle: Function;
  formId: number | string;
  resize?: boolean;
};

const StatusSelector = ({
  isEnabled,
  handleToggle,
  formId,
  resize = false,
}: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };
  const handleClose = (event: React.MouseEvent) => {
    event.stopPropagation();
    setAnchorEl(null);
  };

  return (
    <>
      <Tooltip
        title={t('backoffice_only:status_selector.change_status')}
        placement="bottom-start"
        sx={{ mb: '4px' }}
      >
        <IconButton
          aria-label="menu"
          aria-controls="icon-menu"
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
          id="button-menu"
          onClick={handleClick}
          sx={{
            minHeight: '25px',
            maxHeight: '25px',
            my: 'auto',
            ml: 1,
            p: 1,
            mb: resize ? '9px' : 'auto',
            borderRadius: '5px',
            backgroundColor: isEnabled ? '#ecfdf3' : '#f2f4f7',
          }}
        >
          <CircleIcon
            sx={{ fontSize: resize ? '0.6rem' : '0.5rem', mr: '8px' }}
            color={isEnabled ? 'success' : 'disabled'}
          />
          <Typography
            fontSize={resize ? '14px' : '12px'}
            sx={{ color: isEnabled ? 'green' : 'gray' }}
          >
            {t('backoffice_only:status_selector.status_label', {
              context: isEnabled ? FormStatus.ENABLED : FormStatus.DISABLED,
            })}
          </Typography>
        </IconButton>
      </Tooltip>
      <Menu
        id="icon-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'button-menu',
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        variant="menu"
      >
        <IconButton
          onClick={e => {
            e.stopPropagation();
            handleToggle(formId, isEnabled);
            setAnchorEl(null);
          }}
          sx={{
            minHeight: resize ? '25px' : '18px',
            maxHeight: resize ? '25px' : '18px',
            minWidth: resize ? '110px' : '90px',
            borderRadius: '0px',
            p: 0,
            m: 0,
            '&:hover': { backgroundColor: 'white' },
            backgroundColor: !isEnabled ? '#ecfdf3' : '#f2f4f7',
          }}
        >
          <CircleIcon
            sx={{ fontSize: resize ? '0.6rem' : '0.5rem', mr: '8px' }}
            color={!isEnabled ? 'success' : 'disabled'}
          />
          <Stack sx={{ minWidth: '50px' }}>
            <Typography
              fontSize={resize ? '14px' : '12px'}
              sx={{ color: !isEnabled ? 'green' : 'gray' }}
            >
              {t('backoffice_only:status_selector.status_action', {
                context: isEnabled ? FormStatus.ENABLED : FormStatus.DISABLED,
              })}
            </Typography>
          </Stack>
        </IconButton>
      </Menu>
    </>
  );
};

export default StatusSelector;