import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogContentText,
  DialogTitle,
  IconButton,
  useTheme,
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { useAppDispatch, useAppSelector } from '../hooks';
import { hideDialog, selectUIState } from '../slices/uiSlice';

function CalendarDialog() {
  const dispatch = useAppDispatch();
  const { dialogOpen } = useAppSelector(selectUIState);
  const theme = useTheme();

  const handleClose = () => {
    dispatch(hideDialog());
  };

  return (
    <Dialog
      open={dialogOpen}
      onClose={handleClose}
      PaperProps={{ sx: { borderRadius: 2 } }}
    >
      <DialogTitle sx={{ textAlign: 'center' }}>
        Calendar Invitation
      </DialogTitle>
      <IconButton
        aria-label="close"
        onClick={handleClose}
        sx={(theme) => ({
          position: 'absolute',
          right: 8,
          top: 8,
          color: theme.palette.grey[500],
        })}
      >
        <CloseIcon />
      </IconButton>
      <DialogContent
        sx={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          gap: 4,
        }}
      >
        <DialogContentText color="inherit">
          Scan the QR code or click the link below to add the calendar invite to
          your device.
        </DialogContentText>
        <img src="/madison-michael-qr-code.png" />
        <a
          href="/madison-michael-wedding.ics"
          style={{ color: theme.palette.primary.main }}
        >
          Add to calendar
        </a>
      </DialogContent>
    </Dialog>
  );
}

export default CalendarDialog;