import React, { useState } from 'react';
import dayjs from 'dayjs';

import { importArchivedAction } from '../../redux/slices';

import { useAppDispatch } from '@/modules/@common/store/hooks';
import {
  Button,
  Checkbox,
  Chip,
  DatePicker,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControlLabel,
  InputAdornment,
  Stack,
  Typography,
} from '@/mui/components';

type Props = {
  feedId: number;
  onClose: () => void;
};

export default function ImportDialog({ feedId, onClose }: Props) {
  const dispatch = useAppDispatch();

  const [date, setDate] = useState<Date>(new Date());
  const [isNotify, setIsNotify] = useState<boolean>(true);

  const handleImport = () => {
    dispatch(importArchivedAction({ feedId, date, isEmailNotification: isNotify }));
    onClose();
  };

  return (
    <Dialog open={!!feedId} onClose={onClose} maxWidth="md">
      <DialogTitle onClose={onClose}>Import archived recordings</DialogTitle>
      <DialogContent>
        <Stack>
          <DatePicker
            data-id="filterDatePickerDate"
            value={dayjs(date ?? new Date())}
            maxDate={dayjs().endOf('day')}
            onChange={(d) => setDate(d ? d.toDate() : new Date())}
            disableFuture
            format="MM/DD/YYYY"
            slotProps={{
              textField: {
                size: 'small',
                InputProps: {
                  startAdornment: (
                    <InputAdornment position="start">
                      <Chip variant="text" color="neutral" size="medium" label="Starting From:" />
                    </InputAdornment>
                  ),
                },
              },
            }}
          />
        </Stack>
      </DialogContent>
      <DialogActions>
        <Stack fullWidth direction="row" justifyContent="space-between" alignItems="center">
          <FormControlLabel
            control={
              <Checkbox size="small" checked={isNotify} onClick={() => setIsNotify(!isNotify)} color="primary" />
            }
            label={
              <Typography variant="subtitle2" color="text.secondary" fontWeight={400}>
                Notify me by email when video is ready
              </Typography>
            }
          />
          <Stack direction="row" spacing={2}>
            <Button size="small" variant="outlined" color="primary" onClick={onClose}>
              Cancel
            </Button>
            <Button size="small" variant="contained" color="primary" onClick={handleImport}>
              Import
            </Button>
          </Stack>
        </Stack>
      </DialogActions>
    </Dialog>
  );
}
