import React, { useState } from "react";

import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";

import { useI18n } from "../../../contexts/I18nContext";
import { PageProps } from "../../../types";

import CancelSubscriptionButton from "./CancelSubscriptionButton";

export const SubscriptionsDialogOptions = ["cancel", "end"] as const;
export type SubscriptionsDialogOption = (typeof SubscriptionsDialogOptions)[number];

export interface SubscriptionsDialogContentProps {
  option: SubscriptionsDialogOption;
  setOption: (option: SubscriptionsDialogOption) => void;
}

export const SubscriptionsDialogContent: React.FC<SubscriptionsDialogContentProps> = ({
  option,
  setOption,
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (
      !(SubscriptionsDialogOptions as unknown as string[]).includes(
        (event.target as HTMLInputElement).value,
      )
    ) {
      throw Error("Invalid option");
    }
    setOption((event.target as HTMLInputElement).value as SubscriptionsDialogOption);
  };

  return (
    <FormControl>
      <RadioGroup
        name="radio-buttons-group"
        sx={{ display: "flex", gap: 2 }}
        value={option}
        onChange={handleChange}
      >
        <Box>
          <FormControlLabel control={<Radio />} label="Cancel" value="cancel" />
          <Typography sx={{ ml: 4, color: "text.secondary" }}>
            Subscription will end on the end date of the subscription. End date is by default the
            next expiry date of an subscription. A cancelled subscription can be resumed until the
            End date is passed.
          </Typography>
        </Box>
        <Box>
          <FormControlLabel control={<Radio />} label="Immediate cancellation" value="end" />
          <Typography sx={{ ml: 4, color: "text.secondary" }}>
            Subscription will end immediately. The subscription cannot be resumed.
          </Typography>
        </Box>
      </RadioGroup>
    </FormControl>
  );
};

export interface SubscriptionsDialogProps {
  open: boolean;
  setOpen: (open: boolean) => void;
  subscriptionId: number;
  refresh: PageProps["refresh"];
}

export const SubscriptionsDialog: React.FC<SubscriptionsDialogProps> = ({
  open,
  setOpen,
  subscriptionId,
  refresh,
}) => {
  const [option, setOption] = useState<SubscriptionsDialogOption>("cancel");
  const { t } = useI18n();
  const handleClose = () => setOpen(false);

  return (
    <>
      <Dialog
        aria-describedby="alert-dialog-description"
        aria-labelledby="alert-dialog-title"
        open={open}
        sx={{ "& .MuiPaper-rounded": { borderRadius: 3 } }}
        onClose={handleClose}
      >
        <DialogTitle id="alert-dialog-title" sx={{ p: 3 }}>
          {t("Cancel subscription")}
        </DialogTitle>
        <DialogContent sx={{ p: 3 }}>
          <DialogContentText id="alert-dialog-description" pb={2}>
            Choose how you want to cancel the subscription.
          </DialogContentText>
          <SubscriptionsDialogContent option={option} setOption={setOption} />
        </DialogContent>
        <DialogActions sx={{ px: 3, py: 3 }}>
          <Button onClick={handleClose}>Close</Button>
          <CancelSubscriptionButton
            handleClose={handleClose}
            operation={
              option === "end"
                ? "subscription.subscription:end"
                : "subscription.subscription:cancel"
            }
            refresh={refresh}
            subscriptionId={subscriptionId}
            variant="text"
          >
            {t("Cancel subscription")}
          </CancelSubscriptionButton>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default SubscriptionsDialog;