import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Badge from '@mui/material/Badge';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Tooltip from '@mui/material/Tooltip';
import Drawer from '@mui/material/Drawer';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import ListItemButton from '@mui/material/ListItemButton';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

import { fDateTime } from 'src/utils/format-time';
import { Iconify } from 'src/components/iconify';
import { Scrollbar } from 'src/components/scrollbar';
import { ColorPicker } from 'src/components/color-utils';

// ----------------------------------------------------------------------

export function CalendarFilters({
  open,
  onClose,
  filters,
  onFilters,
  canReset,
  onResetFilters,
  dateError,
  events,
  onClickEvent,
}) {
  
  // Статичные пресеты: Красный (Отмена), Фиолетовый (Запланировано), Зеленый (Завершено)
  const colorOptions = ['#FF4842', '#7635dc', '#00AB55', '#1890FF'];

  const renderHead = (
    <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ py: 2, pr: 1, pl: 2.5 }}>
      <Typography variant="h6" sx={{ flexGrow: 1 }}>
        Фильтры
      </Typography>

      <Tooltip title="Сбросить">
        <IconButton onClick={onResetFilters}>
          <Badge color="error" variant="dot" invisible={!canReset}>
            <Iconify icon="solar:restart-bold" />
          </Badge>
        </IconButton>
      </Tooltip>

      <IconButton onClick={onClose}>
        <Iconify icon="mingcute:close-line" />
      </IconButton>
    </Stack>
  );

  const renderColors = (
    <Stack spacing={1} sx={{ px: 2.5, py: 3 }}>
      <Typography variant="subtitle2">По цвету (статусу)</Typography>
      <ColorPicker
        colors={colorOptions}
        selected={filters.colors}
        onSelectColor={(color) => onFilters('colors', color)}
      />
    </Stack>
  );

  const renderDateRange = (
    <Stack spacing={1.5} sx={{ px: 2.5, py: 3 }}>
      <Typography variant="subtitle2">Диапазон дат</Typography>
      <DatePicker
        label="От"
        value={filters.startDate}
        onChange={(newValue) => onFilters('startDate', newValue)}
        slotProps={{ textField: { fullWidth: true } }}
      />
      <DatePicker
        label="До"
        value={filters.endDate}
        onChange={(newValue) => onFilters('endDate', newValue)}
        slotProps={{
          textField: {
            fullWidth: true,
            error: dateError,
            helperText: dateError && 'Дата окончания не может быть раньше начала',
          },
        }}
      />
    </Stack>
  );

  const renderEvents = (
    <Stack spacing={0.5} sx={{ py: 1 }}>
      <Typography variant="subtitle2" sx={{ px: 2.5, py: 2 }}>
        События ({events.length})
      </Typography>

      <Scrollbar sx={{ maxHeight: 400 }}>
        {events.map((event) => (
          <ListItemButton
            key={event.id}
            onClick={() => onClickEvent(event.id)}
            sx={{ py: 1.5, px: 2.5, borderBottom: (theme) => `dashed 1px ${theme.palette.divider}` }}
          >
            <Box
              sx={{
                width: 6,
                height: 6,
                borderRadius: '50%',
                bgcolor: event.color,
                mr: 2,
              }}
            />
            <Stack>
              <Typography variant="subtitle2">{event.title}</Typography>
              <Typography variant="caption" sx={{ color: 'text.disabled' }}>
                {fDateTime(event.start)}
              </Typography>
            </Stack>
          </ListItemButton>
        ))}
      </Scrollbar>
    </Stack>
  );

  return (
    <Drawer
      anchor="right"
      open={open}
      onClose={onClose}
      slotProps={{ backdrop: { invisible: true } }}
      PaperProps={{ sx: { width: 320 } }}
    >
      {renderHead}
      <Divider sx={{ borderStyle: 'dashed' }} />
      {renderColors}
      {renderDateRange}
      <Divider sx={{ borderStyle: 'dashed' }} />
      {renderEvents}
    </Drawer>
  );
}
