import { type FC } from 'react';

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

import { type Step } from '../../types';

type NavItem = {
  label: string;
  value: Step;
  canNavigate?: boolean;
  hasError?: boolean;
};

type Props = {
  items: NavItem[];
  selectedItem: Step;
  onItemSelect: (item: Step) => void;
};

const SidebarNavigation: FC<Props> = ({
  items,
  selectedItem,
  onItemSelect,
}) => (
  <Stack
    component={Paper}
    elevation={1}
    sx={{
      p: 2,
      pt: 4,
      height: '100%',
      backgroundColor: ({ palette }) => palette.new.background.layout.tertiary,
      borderRadius: 0,
      borderRight: ({ palette }) =>
        `1px solid ${palette.new.border.neutral.divider}`,
      gap: 0.5,
    }}
  >
    {items.map(item => {
      const isSelected = selectedItem === item.value;
      const hasError = item.hasError;
      const canNavigate = item.canNavigate;

      return (
        <Stack
          key={item.value}
          onClick={() => item.canNavigate && onItemSelect(item.value)}
          sx={{
            px: 1.5,
            py: 1.5,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            cursor: canNavigate ? 'pointer' : 'default',
            opacity: canNavigate ? 1 : 0.5,
            backgroundColor: ({ palette }) =>
              isSelected ? palette.new.background.elements.grey : 'transparent',
            borderRadius: ({ shape }) => shape.borderRadiusL,
            '&:hover': canNavigate
              ? {
                  backgroundColor: ({ palette }) =>
                    palette.new.background.elements.grey,
                }
              : undefined,
          }}
        >
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            sx={{
              color: ({ palette }) => palette.new.text.neutral.default,
            }}
          >
            {item.label}
          </Typography>
          {hasError && (
            <Stack
              sx={{
                height: '8px',
                width: '8px',
                borderRadius: '50%',
                backgroundColor: ({ palette }) => palette.newBase?.red[500],
              }}
            />
          )}
        </Stack>
      );
    })}
  </Stack>
);

export default SidebarNavigation;