import { useState } from 'react';
import Carousel from 'react-material-ui-carousel';

import { IconChevronLeft, IconChevronRight } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Grid from '@material-hu/mui/Grid';
import IconButton from '@material-hu/mui/IconButton';
import { Theme, SxProps } from '@material-hu/mui/styles';

import { useSidebar } from 'src/contexts/SidebarContext';
import { useCarousel } from 'src/pages/dashboard/timeOff/hooks/useCarousel';
import { PolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { PolicyTypeItem } from '../../../policyTypes';
import { SideFade } from '../../SideFade';

type CarouselPoliciesProps = {
  policyTypes: PolicyTypes[];
};

type CustomArrowProps = {
  onClick: () => void;
  label: string;
  sx?: SxProps<Theme>;
  side?: 'right';
};

const ARROW_BASE_STYLES: SxProps<Theme> = {
  position: 'absolute',
  zIndex: 100,
  top: '50%',
  transform: 'translateY(-50%)',
  borderRadius: 1,
  backgroundColor: (theme: Theme) =>
    theme.palette.new.background.elements.default,
  border: (theme: Theme) =>
    `1px solid ${theme.palette.new.border.neutral.brand}`,
};

const CustomArrow = ({ onClick, label, side, sx }: CustomArrowProps) => {
  return (
    <IconButton
      size="medium"
      aria-label={label}
      onClick={onClick}
      sx={{
        ...ARROW_BASE_STYLES,
        ...sx,
      }}
    >
      {side === 'right' ? <IconChevronRight /> : <IconChevronLeft />}
    </IconButton>
  );
};

const CarouselPolicies = ({ policyTypes }: CarouselPoliciesProps) => {
  const { t } = useLokaliseTranslation('time_off');
  const { groupedPolicyTypes, gridSize } = useCarousel(policyTypes);
  const [currentIndex, setCurrentIndex] = useState(0);

  useSidebar();

  const handleNext = () => {
    setCurrentIndex(prev => Math.min(prev + 1, groupedPolicyTypes.length - 1));
  };

  const handlePrevious = () => {
    setCurrentIndex(prev => Math.max(prev - 1, 0));
  };

  return (
    <Box sx={{ position: 'relative', width: '100%' }}>
      <Carousel
        autoPlay={false}
        indicators={false}
        swipe={true}
        navButtonsAlwaysInvisible
        cycleNavigation={false}
        index={currentIndex}
        onChange={newIndex => setCurrentIndex(newIndex ?? 0)}
        sx={{ overflow: 'visible' }}
      >
        {groupedPolicyTypes.map((group, idx) => (
          <Grid
            container
            key={idx}
          >
            {group.map(item => (
              <Grid
                item
                xs={gridSize}
                key={item.id}
              >
                <PolicyTypeItem
                  policyType={item}
                  sx={{ p: 0.5 }}
                />
              </Grid>
            ))}
          </Grid>
        ))}
      </Carousel>
      {currentIndex > 0 && (
        <SideFade side="left">
          <CustomArrow
            onClick={handlePrevious}
            label={t('PREVIOUS_POLICIES')}
            sx={{ left: -5 }}
          />
        </SideFade>
      )}
      {currentIndex < groupedPolicyTypes.length - 1 && (
        <SideFade side="right">
          <CustomArrow
            onClick={handleNext}
            label={t('NEXT_POLICIES')}
            side="right"
            sx={{ right: -5 }}
          />
        </SideFade>
      )}
    </Box>
  );
};

export default CarouselPolicies;
