import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { useModal } from '@material-hu/hooks/useModal';
import DeleteOutline from '@material-hu/icons/material/DeleteOutline';
import PeopleOutlined from '@material-hu/icons/material/PeopleOutlined';
import { useTheme } from '@material-hu/mui/styles';

import IconsMenu from '@material-hu/components/deprecated/IconsMenu';

import PencilAltIcon from 'src/icons/PencilAlt';
import { type Position } from 'src/types/positions';
import { useLokaliseTranslation } from 'src/utils/i18n';

import DeletePositionModal from './DeletePositionModal';
import PositionMembersList from './PositionMembersList';
import { positionsRoutes } from './routes';

export type PositionActionsProps = {
  position: Position;
};

export const PositionActions = ({ position }: PositionActionsProps) => {
  const [membersOpen, setMembersOpen] = useState(false);

  const { t } = useLokaliseTranslation('settings');
  const navigate = useNavigate();
  const theme = useTheme();

  const { modal: deleteModal, showModal: showDeleteModal } =
    useModal(DeletePositionModal);

  const handleDelete = () => showDeleteModal({ position });
  const handleEdit = () => navigate(positionsRoutes.edit(position.id));
  const handleMembers = () => setMembersOpen(true);
  const handleMembersClose = () => setMembersOpen(false);

  return (
    <>
      {deleteModal}
      {membersOpen && (
        <PositionMembersList
          position={position}
          open={membersOpen}
          onClose={handleMembersClose}
        />
      )}
      <IconsMenu
        options={[
          {
            label: t('GENERAL.POSITIONS_TAB.EDIT_POSITION'),
            icon: <PencilAltIcon fontSize="small" />,
            onClick: handleEdit,
          },
          {
            label: t('GENERAL.POSITIONS_TAB.VIEW_MEMBERS'),
            icon: <PeopleOutlined fontSize="small" />,
            onClick: handleMembers,
          },
          {
            label: t('GENERAL.POSITIONS_TAB.DELETE_POSITION'),
            icon: <DeleteOutline />,
            onClick: handleDelete,
            color: theme.palette.error.main,
          },
        ]}
      />
    </>
  );
};

export default PositionActions;