import { Box, Stack, Typography, useTheme } from '@mui/material';
import { IconCheck } from '@tabler/icons-react';

import { type StageProps } from './type';
import {
  getStageColorConfig,
  getStatus,
  getSubStageColorConfig,
  STATUS,
} from './utils';

export const Stage = ({
  stage,
  index,
  status,
  activeSubStage,
  isCompleted,
  hasError,
  subStageErrors,
  onStageClick,
  onSubStageClick,
}: StageProps) => {
  const theme = useTheme();

  const stageColorConfig = getStageColorConfig(status, hasError, theme);

  return (
    <Box>
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
        <Stack
          onClick={
            status === STATUS.COMPLETED
              ? () => onStageClick?.(index)
              : undefined
          }
          sx={{
            borderRadius: '100%',
            border: `1px solid ${stageColorConfig.border}`,
            width: 40,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
            cursor: status === STATUS.COMPLETED ? 'pointer' : 'default',
            backgroundColor: stageColorConfig.background,
          }}
        >
          {status === STATUS.COMPLETED && (
            <IconCheck
              size={20}
              strokeWidth={2}
              color={theme.palette.new.text.neutral.brand}
            />
          )}
          {status !== STATUS.COMPLETED && (
            <Typography
              variant="globalXS"
              sx={{
                fontWeight: 'fontWeightSemiBold',
                color: stageColorConfig.color,
              }}
            >
              {index + 1}
            </Typography>
          )}
        </Stack>
        <Typography
          variant="globalS"
          sx={{
            textAlign: 'center',
            color: stageColorConfig.color,
            fontWeight: 'fontWeightSemiBold',
          }}
        >
          {stage.label}
        </Typography>
      </Stack>
      {status === STATUS.ACTIVE && (
        <Stack sx={{ pt: 1 }}>
          {stage.subStages.map((subStage, subStageIndex) => {
            const subStageStatus = getStatus(
              activeSubStage,
              subStageIndex,
              isCompleted,
            );
            const hasSubStageError =
              subStageErrors?.includes(subStageIndex) ?? false;

            const subStageColor = getSubStageColorConfig(
              subStageStatus,
              hasSubStageError,
              theme,
            );

            return (
              <Stack
                sx={{
                  flexDirection: 'row',
                  gap: 1,
                  alignItems: 'center',
                  cursor:
                    subStageStatus === STATUS.COMPLETED ? 'pointer' : 'default',
                }}
                key={subStageIndex}
                onClick={
                  subStageStatus === STATUS.COMPLETED
                    ? () => onSubStageClick?.(index, subStageIndex)
                    : undefined
                }
              >
                <Stack sx={{ alignItems: 'center', width: 40, height: 40 }}>
                  <Stack
                    key={subStage.label}
                    sx={{
                      width: 0,
                      height: '36px',
                      border: `2px solid ${subStageColor.border}`,
                    }}
                  ></Stack>
                </Stack>

                <Typography
                  variant="globalS"
                  sx={{
                    textAlign: 'center',
                    color: subStageColor.color,
                  }}
                >
                  {subStage.label}
                </Typography>
              </Stack>
            );
          })}
        </Stack>
      )}
    </Box>
  );
};
