import { useState } from 'react';

import { IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Alert from '@material-hu/components/design-system/Alert';
import Button from '@material-hu/components/design-system/Buttons/Button';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Search from '@material-hu/components/design-system/Inputs/Search';
import Skeleton from '@material-hu/components/design-system/Skeleton';

import { useDebounce } from 'src/hooks/useDebounce';
import { type Shift } from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { InfiniteList } from 'src/components/list';

import { useGetShiftsRepository } from '../../../../hooks/useGetShiftsRepository';

import ShiftSelectorItem from './ShiftSelectorItem';

type Props = {
  selectedShift: Shift | null;
  hasOverlap: boolean;
  onSelect: (shift: Shift) => void;
  onCreateNewShift: () => void;
};

const AddShiftDrawerContent = ({
  selectedShift,
  hasOverlap,
  onSelect,
  onCreateNewShift,
}: Props) => {
  const { t } = useLokaliseTranslation('shifts');
  const { palette } = useTheme();
  const [search, setSearch] = useState('');
  const { debouncedValue: debouncedSearch } = useDebounce(search, 300);

  const {
    registers,
    isLoading,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
  } = useGetShiftsRepository({ search: debouncedSearch });

  const hasResults = registers.length > 0;

  return (
    <Stack sx={{ height: '100%' }}>
      <CardContainer
        padding={24}
        color="grey"
        sx={{
          border: 'unset',
          flex: 1,
          minHeight: 0,
          overflowY: 'auto',
          position: 'relative',
        }}
        fullWidth
      >
        <Stack
          sx={{
            position: 'sticky',
            top: 0,
            mx: -3,
            mt: -3,
            mb: 2,
            px: 3,
            pt: 3,
            pb: 2,
            gap: 2,
            backgroundColor: palette.new.background.elements.grey,
            zIndex: 1,
          }}
        >
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('templates.resume.shifts')}
          </Typography>
          <Search
            value={search}
            placeholder={t('search_by_name')}
            onChange={setSearch}
          />
        </Stack>

        <InfiniteList
          isSuccess={hasResults}
          isLoading={isLoading}
          isEmpty={!hasResults && !isLoading}
          isFetchingNextPage={isFetchingNextPage}
          hasNextPage={hasNextPage}
          fetchNextPage={fetchNextPage}
          renderSkeleton={
            <Stack sx={{ gap: 2 }}>
              {Array.from({ length: 10 }).map((_, i) => (
                <Skeleton
                  key={i}
                  height={58}
                />
              ))}
            </Stack>
          }
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
          }}
          loadingSkeleton
        >
          {registers.map(shift => (
            <ShiftSelectorItem
              key={shift.id}
              shift={shift}
              isSelected={selectedShift?.id === shift.id}
              onToggle={onSelect}
            />
          ))}
        </InfiniteList>

        <Stack
          sx={{
            position: 'sticky',
            bottom: 0,
            mx: -3,
            mb: -3,
            mt: 2,
            px: 3,
            py: 2,
            gap: 2,
            backgroundColor: palette.new.background.elements.grey,
            borderTop: `1px solid ${palette.new.border.neutral.default}`,
          }}
        >
          {hasOverlap && (
            <Alert
              severity="warning"
              title={t('templates.form.overlap')}
              description={t('templates.form.overlap_description')}
            />
          )}
          <Button
            variant="secondary"
            color="primary"
            fullWidth
            startIcon={<IconPlus size={16} />}
            onClick={onCreateNewShift}
          >
            {t('create_shift')}
          </Button>
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default AddShiftDrawerContent;
