import React, { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogContentText,
  DialogActions,
  Box,
  Typography,
  Button,
  styled,
} from "@mui/material";
import {
  BtnFilled,
  BtnOutlined,
} from "@/components/common/buttons/ButtonsVariations";

import {
  OuterContainer,
  CrossIconContainer,
  CloseIconContainer,
  closeIconStyle,
} from "./DeleteDialougeStyle";
import CloseIcon from "@mui/icons-material/Close";
import { ThreeDots } from "react-loader-spinner";
import { apiClient } from "../common";
import { useRouter } from "next/router";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";

const BootstrapDialog = styled(Dialog)(({ theme }) => ({
  "& .MuiDialogContent-root": {
    padding: theme.spacing(2),
  },
  "& .MuiDialogActions-root": {
    padding: theme.spacing(1),
  },
  "& .MuiPaper-root": {
    width: "700px",
    maxWidth: "700px",
    padding: "30px 16px ",
  },
  "& .current": {
    color: "#d7282f",
    border: "1px solid #d7282f",
    fontSize: "13px",
    textTransform: "capitalize",
    "&:hover": {
      color: "#fff",
      backgroundColor: "#d7282f",
    },
  },
  "& .upgrade": {
    color: "#fff",
    border: "1px solid #d7282f",
    fontSize: "13px",
    textTransform: "capitalize",
    backgroundColor: "#d7282f",
    "&:hover": {
      color: "#d7282f",
      backgroundColor: "#fff",
    },
  },
  "& .aiplan": {
    color: "#fff",
    border: "1px solid #d7282f",
    fontSize: "13px",
    textTransform: "capitalize",
    backgroundColor: "#d7282f",
    "&:hover": {
      color: "#fff",
      backgroundColor: "#b11117ff",
    },
  },
}));

const PlanAlertDialog = ({
  open,
  handleClose,
  onClickAction,
  loading,
  features,
  role,
  editpost = false,
  featureName = null,
}: any) => {
  const [disableButton, setDisable] = useState<boolean>(false);
  const [addPlanLoading, setAddPlanLoading] = useState<boolean>(false);
  useEffect(() => {
    FetchPlanDetail();
  }, []);
  const [plan, setPlan] = useState("");
  const FetchPlanDetail = async () => {
    let response = await apiClient("users/current_plan", "get");
    if (response.status === 200) {
      setPlan(response?.data?.name);
    }
  };
  const router: any = useRouter();
  const NavigateHandler = (route: any) => {
    router.push(`${route}`);
  };
  return (
    <BootstrapDialog
      onClose={handleClose}
      aria-labelledby="customized-dialog-title"
      open={open}
    >
      <Box sx={{ position: "relative" }}>
        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
          <Box
            sx={{
              // position: "absolute",
              right: "16px",
              top: "16px",
              height: "30px",
              width: "30px",
              background: "#FFE8EC",
              borderRadius: "50%",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              "& svg": {
                color: "#d7282f",
              },
            }}
          >
            <CloseOutlinedIcon onClick={handleClose}/>
          </Box>
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            flexDirection: "column",
          }}
        >
          <Box>
            <Typography
              sx={{
                fontSize: "23px",
                fontWeight: "700",
                color: "#231f20",
                textAlign: "center",
              }}
            >
              "You've Used All Your {featureName} Credits"
              {/* Your current {featureName} has been expired */}
            </Typography>
          </Box>
          <Box sx={{ margin: "20px 0 0 0", textAlign: "center" }}>
            <Typography sx={{ fontSize: "16px", color: "#231f20" }}>
              Your cument Power Cozmo plan is active, but you've used up all
              your credits for Feature Name To continue using this feature,
              please choose one of the following options
            </Typography>
          </Box>
          <Box
            sx={{
              margin: "20px 0 0 0",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Button
              className="current"
              onClick={() => NavigateHandler("/subscription")}
            >
              Buy more credits
            </Button>
            <Button className="upgrade" onClick={onClickAction}>
              Upgrade your plan
            </Button>
            <Button className="aiplan" onClick={onClickAction}>
              Explore AI available plans
            </Button>
          </Box>
        </Box>
      </Box>
    </BootstrapDialog>
    // <Dialog
    //   open={open}
    //   onClose={() => handleClose(false)}
    //   aria-labelledby="alert-dialog-title"
    //   aria-describedby="alert-dialog-description"
    //   sx={{ padding: 10 }}
    // >
    //   <OuterContainer onClick={() => handleClose(false)}>
    //     <CrossIconContainer>
    //       <CloseIcon style={{ color: "#FF1A43" }} />
    //     </CrossIconContainer>
    //   </OuterContainer>
    //   <CloseIconContainer>
    //     <CloseIcon style={closeIconStyle} />
    //   </CloseIconContainer>
    //   <DialogContent>
    //     <DialogContentText
    //       id="alert-dialog-description1"
    //       sx={{
    //         fontFamily: "Open Sans",
    //         fontStyle: "normal",
    //         fontWeight: "400",
    //         fontSize: "13px",
    //         lineHeight: "21px",
    //         color: "#4A4A4A",
    //         textAlign: "center",
    //       }}
    //     >
    //       Your{" "}
    //       <span
    //         style={{ fontWeight: "bold",cursor:'pointer' }}
    //         onClick={() => {
    //           NavigateHandler("/subscription");
    //         }}
    //       >
    //         {plan} plan
    //       </span>{" "}
    //       doesn't support {features}
    //       <br />
    //       Upgrade to unlock this feature.
    //       {role == "seller" && (
    //         <span
    //           onClick={() => {
    //             NavigateHandler("/subscription");
    //           }}
    //           style={{
    //             fontWeight: "bold",
    //             fontSize: "12px",
    //             cursor: "pointer",
    //           }}
    //         >
    //           View Plan
    //         </span>
    //       )}
    //       <br></br>
    //       {role == "subuser" && (
    //         <span>Please contact with seller to upgrade plan.</span>
    //       )}
    //     </DialogContentText>
    //   </DialogContent>
    //   {(role == "seller" || editpost) && (
    //     <DialogActions sx={{ justifyContent: "center", marginBottom: 2 }}>
    //       <BtnFilled
    //         disabled={disableButton}
    //         type="submit"
    //         height={"36px"}
    //         onClick={() => {
    //           setDisable(true);
    //           onClickAction();
    //         }}
    //       >
    //         {disableButton || loading ? (
    //           <ThreeDots
    //             height="40"
    //             width="40"
    //             radius="9"
    //             color="white"
    //             ariaLabel="three-dots-loading"
    //             wrapperStyle={{}}
    //             visible={true}
    //           />
    //         ) : (
    //           "Upgrade"
    //         )}
    //       </BtnFilled>
    //       <BtnFilled
    //         disabled={disableButton}
    //         type="submit"
    //         height={"36px"}
    //         onClick={() => {
    //           setAddPlanLoading(true);
    //           router.push(`/subscription`);
    //         }}
    //       >
    //         {addPlanLoading ? (
    //           <ThreeDots
    //             height="40"
    //             width="40"
    //             radius="9"
    //             color="white"
    //             ariaLabel="three-dots-loading"
    //             wrapperStyle={{}}
    //             visible={true}
    //           />
    //         ) : (
    //           "Add Plan"
    //         )}
    //       </BtnFilled>
    //       <BtnOutlined
    //         disabled={disableButton}
    //         height={"36px"}
    //         onClick={() => handleClose(false)}
    //       >
    //         Cancel
    //       </BtnOutlined>
    //     </DialogActions>
    //   )}
    // </Dialog>
  );
};

export default PlanAlertDialog;