import ImageCropper from "@/components/common/ImageCropper";
import React, { useEffect, useState } from "react";
import {
  CompanyName,
  CompanyNameContainer,
  CoverImage,
  Edit,
  FloatingEditIconCompanyName,
  Logo,
  LogoContainer,
  PencilIconCompanyName,
} from "./styles";
import Image from "next/image";
import {
  Box,
  Button,
  Dialog,
  List,
  ListItem,
  ListItemText,
  Skeleton,
  styled,
  Tooltip,
  Typography,
} from "@mui/material";
import { LightTooltip } from "@/components/common/Tooltip/tooltip";
import {
  MinisiteBtnPopup,
  MinisiteBtnPopupContent,
  PopupContentInner,
  PopUpSubHeading,
  PopUpAction,
  PopUpCancelBTN,
  PopUpSaveBTN,
} from "@/components/CompanySettings/style";
import VerifiedOutlinedIcon from "@mui/icons-material/VerifiedOutlined";
import { useRouter } from "next/router";
import { VarifyBox } from "@/components/miniSite/styled";
import CheckIcon from "@mui/icons-material/Check";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";

const CompanyProfileCover: any = ({
  companyDetails,
  DeleteImage,
  breakPoints,
  role,
  editModal,
}) => {
  const [modalOpen, setModalOpen] = useState(false);
  const [open1, setOpen1] = React.useState(false);

  const handleLogoClick = () => {
    setModalOpen(true);
  };

  const handleCloseModal = () => {
    setModalOpen(false);
  };

  const [loader, setLoader] = useState(false);
  useEffect(() => {
    if (companyDetails?.contact_profile?.name) {
      setLoader(false);
    } else {
      setLoader(true);
    }
  }, [companyDetails]);

  const router = useRouter();

  let allowToVerify = false;
  const verifyAfter = companyDetails?.basic_information?.verify_after;
  const currentDate = new Date().toString();

  if (verifyAfter && currentDate > verifyAfter) {
    allowToVerify = true;
  }

  const BootstrapDialog = styled(Dialog)(({ theme }) => ({
    "& .MuiDialogContent-root": {
      padding: theme.spacing(2),
    },
    "& .MuiDialogActions-root": {
      padding: theme.spacing(1),
    },
    "& .MuiPaper-root": {
      width: "600px",
      maxWidth: "600px",
      padding: "16px 25px ",
    },
  }));
  const handleClose1 = () => {
    setOpen1(false);
  };

  return (
    <>
      <BootstrapDialog
        onClose={handleClose1}
        aria-labelledby="customized-dialog-title"
        open={open1}
      >
        <Box>
          {/* <Box
            sx={{
              display: "flex",
              justifyContent: "flex-end",
              padding: "15px",
            }}
          >
            <Box
              sx={{
                height: "30px",
                width: "30px",
                borderRadius: "50%",
                background: "#FFE8EC",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                "& svg": {
                  color: "#d7282f",
                },
              }}
            >
              <CloseOutlinedIcon />
            </Box>
          </Box> */}
          <Box
            sx={{
              display: "flex",
              justifyContent: "center",
            }}
          >
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                "& svg": {
                  color: "#d7282f",
                },
              }}
            >
              {/* <CloseOutlinedIcon
                sx={{
                  height: "50px",
                  width: "50px",
                }}
              /> */}
              <img src="/assets/images/pcVerified.svg" alt="" />
            </Box>
          </Box>
        </Box>
        <MinisiteBtnPopupContent>
          <PopupContentInner sx={{ width: "100%" }}>
            <Box sx={{ margin: "20px 0 0 0" }}>
              <Typography sx={{ textAlign: "center" }}>
                You can’t edit your verified company details within 30 days of
                verification. <br /> Please wait until the lock period ends or
                contact support if <br /> there's an urgent update.{" "}
              </Typography>
            </Box>
          </PopupContentInner>
        </MinisiteBtnPopupContent>
        <PopUpAction>
          <PopUpCancelBTN onClick={handleClose1}>Ok</PopUpCancelBTN>
        </PopUpAction>
      </BootstrapDialog>
      <LogoContainer>
        <CoverImage
          src={
            companyDetails?.contact_profile?.profile_banner ||
            "/assets/default/defaultCompanyBanner.svg"
          }
        />

        <div className="CoverLogo">
          <ImageCropper
            deleteImages={DeleteImage}
            type={"banner"}
            endPoints={"company_profile/updateProfile"}
            params={"profile_banner"}
            defaultImage={companyDetails?.contact_profile?.profile_banner}
          />
        </div>
        <div className="CircleLogo">
          <Logo
            breakPoints={breakPoints}
            src={
              companyDetails?.contact_profile?.profile_image ||
              "/assets/default/defaultCompanyImage.png"
            }
            onClick={
              companyDetails?.contact_profile?.profile_image
                ? handleLogoClick
                : undefined
            }
            style={{
              cursor: companyDetails?.contact_profile?.profile_image
                ? "pointer"
                : "default",
            }}
          />

          <ImageCropper
            deleteImages={DeleteImage}
            type={"profile"}
            endPoints={"company_profile/updateProfile"}
            params={"profile_image"}
            defaultImage={companyDetails?.contact_profile?.profile_image}
          />
        </div>
      </LogoContainer>
      {modalOpen && (
        <div className="personalmodal" onClick={handleCloseModal}>
          <div
            className="personalmodal-content"
            onClick={(e) => e.stopPropagation()}
          >
            <img
              src={
                companyDetails?.contact_profile?.profile_image ||
                "/assets/default/defaultCompanyImage.png"
              }
              alt="Profile"
            />
          </div>
        </div>
      )}
      <CompanyNameContainer>
        <div>
          {loader === true ? (
            <Skeleton
              animation="wave"
              variant="text"
              width={120}
              sx={{ margin: "0 0 23px 0" }}
            />
          ) : (
            <>
              <CompanyName
                sx={{
                  display: "-webkit-box",
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: "vertical",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                <LightTooltip
                  arrow
                  disableInteractive
                  placement="top"
                  title={companyDetails?.contact_profile?.name}
                >
                  {companyDetails?.contact_profile?.name}
                </LightTooltip>
                <span
                  style={{
                    fontWeight: 400,
                    fontSize: "13px",
                    lineHeight: "18px",
                    color: "#D7282F",
                  }}
                >
                  {/* {companyDetails?.contact_profile?.phone_verified === "1" &&
                      companyDetails?.contact_profile?.email_verified ===
                        "1" && (
                        <Tooltip title="Verified" placement="top" arrow>
                          <span>
                            <Image
                              style={{ margin: "0px 0 -6px 4px" }}
                              src={"/assets/premium-user1.svg"}
                              alt="verified-img"
                              width={25}
                              height={25}
                            />
                          </span>
                        </Tooltip>
                      )}
                    {companyDetails?.basic_information?.is_company_approved && (
                      <Tooltip title="Verified" placement="top" arrow>
                        <span>
                          <Image
                            style={{ margin: "0px 0 -6px 4px" }}
                            src={"/assets/Approved.svg"}
                            alt="verified-img"
                            width={30}
                            height={30}
                          />
                        </span>
                      </Tooltip>
                    )}
                    {companyDetails?.newLicence?.rejection_comment !== null &&
                      companyDetails?.newLicence?.rejection_comment !== "" && (
                        <Tooltip title="Verified" placement="top" arrow>
                          <span>
                            <Image
                              style={{ margin: "0px 0 -6px 4px" }}
                              src={"/assets/Rejected.svg"}
                              alt="verified-img"
                              width={30}
                              height={30}
                            />
                          </span>
                        </Tooltip>
                      )} */}
                </span>
              </CompanyName>
            </>
          )}
        </div>
        <FloatingEditIconCompanyName
          onClick={() => {
            // editModal();
          }}
        >
          {companyDetails?.basic_information?.business_verified ? (
            <VarifyBox>
              <img
                src="/assets/verifyWtext.svg"
                width="60"
                height="21"
                loading="lazy"
                style={{ margin: "4px 0 0 0" }}
              />
            </VarifyBox>
          ) : (
            <Button
              sx={{
                border: "1px solid #231f20",
                color: "#231f20",
                fontSize: "13px",
                fontWeight: "600",
                padding: "2px 8px",
                textTransform: "capitalize",
                margin: "0 10px 0 0px",
              }}
              onClick={() => {
                router.push("/business-verification");
              }}
            >
              Get Verified
            </Button>
          )}
          <PencilIconCompanyName>
            {" "}
            <Image
              src={"/assets/EditPencil.svg"}
              layout="fill"
              alt="edit-img"
            />
          </PencilIconCompanyName>
          <Edit
            onClick={() => {
              if (allowToVerify) {
                setOpen1(true);
                return;
              }
              router.push("/business-verification");
            }}
          >
            Edit
          </Edit>
        </FloatingEditIconCompanyName>
      </CompanyNameContainer>
    </>
  );
};

export default CompanyProfileCover;