import { type FC, useState } from 'react';

import Box from '@material-hu/mui/Box';
import { styled } from '@material-hu/mui/styles';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { FormStatus } from 'src/types/forms';

const Container = styled(Box)({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: '100%',
  height: '100%',
  textAlign: 'center',
  gap: '10px',
});

const actionByButtons = {
  [FormStatus.UNASSIGNED]: ({
    handleAssign,
    unassignedTitle,
    isDisabled,
    setButtonDisabled,
    stylesButton,
  }: MakeActionProps) => {
    const handleOnAssign = () => {
      setButtonDisabled();
      handleAssign();
    };
    return (
      <Container
        sx={{
          ...stylesButton,
        }}
      >
        <Button
          variant="outlined"
          color="primary"
          disabled={isDisabled}
          onClick={handleOnAssign}
          size="small"
        >
          {unassignedTitle}
        </Button>
      </Container>
    );
  },
  [FormStatus.PENDING]: ({
    handleApprove,
    handleReject,
    approveTitle,
    rejectTitle,
    stylesButton,
  }: MakeActionProps) => (
    <Container
      sx={{
        ...stylesButton,
      }}
    >
      <Button
        variant="outlined"
        color="primary"
        onClick={handleApprove}
        size="small"
      >
        {approveTitle}
      </Button>
      <Button
        variant="outlined"
        color="primary"
        onClick={handleReject}
        size="small"
      >
        {rejectTitle}
      </Button>
    </Container>
  ),
};

export type MakeActionProps = {
  approvalStatus: string;
  handleAssign?: () => void;
  unassignedTitle?: string;
  handleApprove?: () => void;
  handleReject?: () => void;
  approveTitle?: string;
  rejectTitle?: string;
  stylesButton?: any;
  isDisabled: boolean;
  setButtonDisabled: () => void;
};

const MakeAction: FC<MakeActionProps> = props => {
  const { approvalStatus } = props;

  const [isDisabled, setIsDisabled] = useState(false);

  const setButtonDisabled = () => {
    setIsDisabled(true);
  };

  return (
    (approvalStatus &&
      actionByButtons[approvalStatus] &&
      actionByButtons[approvalStatus]({
        isDisabled,
        setButtonDisabled,
        ...props,
      })) ||
    null
  );
};

export default MakeAction;