import {
  Box,
  Step,
  StepDescription,
  StepIcon,
  StepIndicator,
  StepNumber,
  StepSeparator,
  StepStatus,
  StepTitle,
  Stepper,
  useSteps,
} from '@chakra-ui/react';
import Image from 'next/image';

const StepApproval = ({ layer, status }) => {
  const steps = [
    { title: 'Indoteknik', layer_approval: 1 },
    { title: 'Manager', layer_approval: 2 },
    { title: 'Director', layer_approval: 3 },
  ];
  const { activeStep } = useSteps({
    index: layer,
    count: steps.length,
  });
  return (
    <Stepper size='md' index={layer} colorScheme='green'>
      {steps.map((step, index) => (
        <Step key={index}>
          <StepIndicator>
            {layer === step.layer_approval && status === 'cancel' ? (
              <StepStatus
                complete={
                  <Image
                    src='/images/remove.png'
                    width={20}
                    height={20}
                    alt=''
                    className='w-full'
                  />
                }
                incomplete={<StepNumber />}
                active={<StepNumber />}
              />
            ) : (
              <StepStatus
                complete={<StepIcon />}
                incomplete={<StepNumber />}
                active={<StepNumber />}
              />
            )}
          </StepIndicator>

          <Box flexShrink='0'>
            <StepTitle className='md:text-xs'>{step.title}</StepTitle>
            {status === 'cancel' ? (
              layer > step.layer_approval ? (
                <StepDescription className='md:text-[8px]'>
                  Approved
                </StepDescription>
              ) : (
                <StepDescription className='md:text-[8px]'>
                  Rejected
                </StepDescription>
              )
            ) : layer >= step.layer_approval ? (
              <StepDescription className='md:text-[8px]'>
                Approved
              </StepDescription>
            ) : (
              <StepDescription className='md:text-[8px]'>
                Pending
              </StepDescription>
            )}
          </Box>
          <StepSeparator _horizontal={{ ml: '0' }} />
        </Step>
      ))}
    </Stepper>
  );
};

export default StepApproval;