import Stack from '@material-hu/mui/Stack';

import Avatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';

import { CONFIG_SIDEBAR_WIDTH } from '../../constants';
import { type StepCompletionStatus } from '../../types';

import { getAvatarColor, getAvatarIcon } from './utils';

type SideStepperProps = {
  steps: {
    label: string;
    id: number;
    disabled: boolean;
    completionStatus?: StepCompletionStatus | null;
  }[];
  onStepClick: (step: number) => void;
  activeStep: number;
};

export const SideStepper = ({
  steps,
  onStepClick,
  activeStep,
}: SideStepperProps) => {
  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        border: 'none',
        gap: 1,
        height: '100%',
        p: 2,
        minWidth: CONFIG_SIDEBAR_WIDTH,
      }}
    >
      {Object.values(steps).map(step => (
        <Button
          type="button"
          onClick={() => onStepClick(step.id)}
          key={step.id}
          variant="text"
          disabled={step.disabled}
          sx={{
            justifyContent: 'flex-start',
            width: '100%',
            p: 2,
            minHeight: 54,
            borderRadius: 2,
            color: theme => {
              if (activeStep === step.id)
                return theme.palette.new.text.neutral.brand;
              return step.disabled
                ? theme.palette.new.text.neutral.disabled
                : theme.palette.new.text.neutral.default;
            },
            backgroundColor: theme =>
              activeStep === step.id
                ? theme.palette.new.background.layout.default
                : 'transparent',
          }}
        >
          <Stack
            sx={{
              alignItems: 'center',
              flexDirection: 'row',
              gap: 1,
              width: '100%',
            }}
          >
            {step.completionStatus && (
              <Avatar
                size="small"
                color={getAvatarColor(step.completionStatus)}
                Icon={getAvatarIcon(step.completionStatus)}
              />
            )}
            {step.label}
          </Stack>
        </Button>
      ))}
    </Stack>
  );
};