import { type FC } from 'react';

import Box from '@material-hu/mui/Box';
import StepUI from '@material-hu/mui/Step';
import StepLabel from '@material-hu/mui/StepLabel';
import StepperUI from '@material-hu/mui/Stepper';
import { styled, useTheme } from '@material-hu/mui/styles';

import { type StepType } from 'src/types/forms';

import StepDescription from './StepDescription';
import StepStatus from './StepStatus';

const Stepper = styled(StepperUI)(({ theme }) => ({
  '&.MuiStepper-horizontal': {
    width: '100%',
    '& .MuiStep-horizontal': {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
      minWidth: '250px',
      padding: '0 20px',
      '& svg text': {
        fill: theme.palette.new.text.neutral.default,
      },
      '& .stepperTitle': {
        color: theme.palette.new.text.neutral.default,
      },
    },
    '& .MuiStepConnector-horizontal': {
      '& > .MuiStepConnector-lineHorizontal': {
        marginTop: '62px',
      },
    },
  },
}));

const Step = styled(StepUI)(({ theme }) => ({
  '&.approved': {
    '& svg.MuiStepIcon-root': {
      color: theme.palette.success.main,
      width: '1.5em',
      height: '1.5em',
    },
  },
  '&.rejected': {
    '& svg.MuiStepIcon-root': {
      color: theme.palette.error.main,
      width: '1.5em',
      height: '1.5em',
    },
  },
  '&.assigned': {
    '& svg.MuiStepIcon-root': {
      color: theme.palette.new.text.neutral.disabled,
      width: '1.5em',
      height: '1.5em',
    },
  },
  '&.cancelled': {
    '& svg.MuiStepIcon-root': {
      color: theme.palette.warning.main,
      width: '1.5em',
      height: '1.5em',
    },
  },
  '&.created': {
    '& svg.MuiStepIcon-root': {
      color: theme.palette.new.text.neutral.disabled,
      width: '1.5em',
      height: '1.5em',
    },
  },
}));

export type ApprovalWorkflowContentProps = {
  steps: StepType[];
};

// TODO: eliminar el parche de step?.responsibleId la idea es que el back debe hacer el cambio
// para que el front ya sepa que hacer dependiendo el step.lastTransaction?.transactionType
const ApprovalWorkflowContent: FC<ApprovalWorkflowContentProps> = props => {
  const { steps } = props;
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: 'flex',
        height: '100%',
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Stepper
        alternativeLabel
        orientation="horizontal"
      >
        {steps.map(step => (
          <Step
            className={
              step?.responsibleId
                ? step?.lastTransaction?.transactionType?.toLowerCase()
                : 'created'
            }
            key={step.stepId}
          >
            <Box sx={{ my: 1 }}>
              <StepStatus
                status={
                  step?.responsibleId
                    ? step.lastTransaction?.transactionType
                    : ''
                }
              />
            </Box>
            <StepLabel>
              <StepDescription
                lastTransaction={step?.lastTransaction}
                responsibleId={step?.responsibleId}
              />
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
};

export default ApprovalWorkflowContent;