import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  FormControl,
  IconButton,
  InputAdornment,
  OutlinedInput,
  Typography,
} from "@mui/material";
import QRCode from "react-qr-code";
import {
  AccommodationCalendarURL,
  AccommodationsCalendarURLApi,
} from "../../api/accommodations/AccommodationsCalendarURLApi";
import { CopyToClipboard } from "../../widgets/CopyToClipboard";

export function InstallCalendarDialog(p: {
  cal?: AccommodationCalendarURL;
  onClose: () => void;
}): React.ReactElement {
  if (!p.cal) return <></>;

  return (
    <Dialog open={true} onClose={p.onClose}>
      <DialogTitle>Installation du calendrier</DialogTitle>
      <DialogContent>
        <DialogContentText>
          <Typography>
            Afin d'installer le calendrier <i>{p.cal.name}</i> sur votre
            appareil, veuillez utiliser l'URL suivante :
          </Typography>
          <br />
          <FormControl fullWidth variant="outlined">
            <OutlinedInput
              value={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
              endAdornment={
                <InputAdornment position="end">
                  <CopyToClipboard
                    content={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
                  >
                    <IconButton>
                      <ContentCopyIcon />
                    </IconButton>
                  </CopyToClipboard>
                </InputAdornment>
              }
            />
            <div
              style={{
                margin: "20px auto",
                padding: "20px",
                backgroundColor: "white",
              }}
            >
              <QRCode
                value={AccommodationsCalendarURLApi.CalendarURL(p.cal!)}
              />
            </div>
          </FormControl>
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={p.onClose}>Fermer</Button>
      </DialogActions>
    </Dialog>
  );
}