import { IconChevronRight } from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { colorPalette } from '@material-hu/theme/hugo/colors';

import SelectionCard from '@material-hu/components/composed-components/SelectionCard';

import {
  COMPETENCIES_CREATE_STEPS_ICONS,
  type CompetenciesCreateStepId,
} from '../../constants';
import { type CompetenciesProfileStep } from '../../types';

type StepsSideBarProps = {
  steps: CompetenciesProfileStep[];
  activeStep: CompetenciesCreateStepId;
  onSelectStep: (stepId: CompetenciesCreateStepId) => void;
};

const StepsSideBar = (props: StepsSideBarProps) => {
  const { steps, activeStep, onSelectStep } = props;
  const theme = useTheme();
  const iconColor = theme.palette.new.text.neutral.brand;

  return (
    <Stack
      sx={{
        gap: 2,
        p: 3,
        position: 'sticky',
        top: 0,
        height: '100vh',
        alignSelf: 'flex-start',
        backgroundColor: colorPalette.hugoBackground.neutralBgTerciary,
      }}
    >
      {steps.map((step, index) => {
        const StepIcon = COMPETENCIES_CREATE_STEPS_ICONS[step.id];

        return (
          <SelectionCard
            key={index}
            onClick={() => onSelectStep(step.id)}
            checked={activeStep === step.id}
          >
            <Stack
              sx={{
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
              }}
            >
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 1,
                }}
              >
                <Stack
                  sx={{
                    backgroundColor:
                      colorPalette.hugoBackground.primaryBgLighter,
                    borderRadius: '50%',
                    p: 1,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <StepIcon color={iconColor} />
                </Stack>
                <Typography
                  variant="globalS"
                  fontWeight="fontWeightSemiBold"
                >
                  {step.label}
                </Typography>
              </Stack>
              <IconChevronRight />
            </Stack>
          </SelectionCard>
        );
      })}
    </Stack>
  );
};
export default StepsSideBar;