import { Box, Text, useDisclosure, VStack, IconButton } from '@chakra-ui/react';
import { BiWrench } from 'react-icons/bi';

import { eventsToRecord } from '../../../modules/code-generator/constants';
import ConfigPaginationStepModal from './ConfigPaginationStepModal';
import AddStepButtonWithModal from './AddStepButtonWithModal';
import { useFormikContext } from 'formik';
import { useState } from 'react';

const StepList = ({ steps, ...restProps }) => {
  const { isOpen, onClose, onOpen } = useDisclosure(),
    formik = useFormikContext(),
    [extractDataStep, setExtractDataStep] = useState(null);

  const handleUpdateStep = (values) => {
    const newSteps = steps.map((step) => {
      if (step.id === values?.id) {
        return values;
      }
      return step;
    });
    formik.setFieldValue('actionCode', newSteps);
  };

  return (
    <Box border="0.5px solid rgba(128, 128, 128, 0.5) " margin="1rem 1rem 0rem 0rem" {...restProps}>
      {steps?.length > 0 ? (
        <>
          <ConfigPaginationStepModal
            eventLogs={steps}
            isOpen={isOpen}
            onClose={onClose}
            step={extractDataStep}
            onSave={handleUpdateStep}
          />
          <Text fontSize="sm" margin="2rem 0rem 4rem 2rem" color="#FFF">
            All Steps
          </Text>
          {steps.map((step, index) => (
            <Step
              key={index}
              steps={steps}
              step={step}
              order={index + 1}
              onOpenModal={() => {
                setExtractDataStep(step);
                onOpen();
              }}
            />
          ))}
        </>
      ) : (
        <Text fontSize="sm" margin="2rem 0rem 4rem 2rem" color="#FFF">
          No Steps
        </Text>
      )}
    </Box>
  );
};

function Step({ step, order, onOpenModal }) {
  const renderStep = (step) => {
    switch (step.action) {
      case eventsToRecord.CLICK:
        return <Text fontSize="sm">Click on {`(${step.selector})`}</Text>;
      case 'GOTO':
        return <Text fontSize="sm">Navigate to {`"${step.href}"`}</Text>;
      case eventsToRecord.INPUT:
        return (
          <Text fontSize="sm">
            Input {`"${step.value}"`} to {`(${step.selector})`}
          </Text>
        );
      case 'select-all':
        return <Text fontSize="sm">Select All on {`(${step.selector})`}</Text>;
      case eventsToRecord.DBLCLICK:
        return <Text fontSize="sm">Double Click on {`(${step.selector})`}</Text>;
      case eventsToRecord.KEYDOWN:
        return (
          <Text fontSize="sm">
            Press {`"${step.key}"`} on {`(${step.selector})`}
          </Text>
        );
      case eventsToRecord.BEFORE_UNLOAD:
        return <Text fontSize="sm">Navigate-Reload</Text>;
      case eventsToRecord.EXTRACT_DATA:
        return (
          <>
            <VStack spacing={3}>
              <Box display="flex" justifyContent="space-between" alignItems="center">
                <Text margin={3} fontSize="sm">
                  Extract Data on {`(${step.selector})`}
                </Text>
                <IconButton color="primary.500" icon={<BiWrench />} onClick={onOpenModal} />
              </Box>
            </VStack>
          </>
        );
      default:
        return <Text fontSize="sm">{step.control}</Text>;
    }
  };

  return (
    <Box>
      <Box border="solid grey" textAlign="center" margin="2rem" p="1rem">
        <Text fontSize="sm">Step {order}</Text>
        {renderStep(step)}
      </Box>
      <Box>{<AddStepButtonWithModal />}</Box>
    </Box>
  );
}

export default StepList;
