import { Box, Grid, Popover, Stack, Typography } from "@mui/material";
import React from "react";
import CPheader from "./CPheaderComponent";
import { useDispatch, useSelector } from "react-redux";
import { setCloseAnchorEl } from "@/hooks/miniSite";
import { CPTextViewBoxCP } from "./CompanyProfile.styled";
import MobileWithFlag from "@/components/common/numberwithflag";
import { formatToFullAddress } from "@/components/Helper";

const ContactDetails = () => {
  const { anchorEll, headerData } = useSelector((state: any) => state.miniSite);
  const { userInfo, minisiteUserID } = useSelector(
    (state: any) => state.miniSite
  );
  let userData = localStorage?.getItem("userData") ?? "";
  let user = userData ? JSON.parse(userData) : "";
  const dispatch = useDispatch();
  const handlePopoverClose = () => {
    dispatch(setCloseAnchorEl(null));
  };
  const open = Boolean(anchorEll);

  return (
    <Box position="relative">
      <Popover
        id="mouse-over-popover"
        sx={{
          pointerEvents: "none",
        }}
        open={open}
        anchorEl={anchorEll}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        onClose={handlePopoverClose}
        disableRestoreFocus
        style={{ marginRight: "10px", boxShadow: "none !important" }}
      />

      <CPheader
        // icon="/assets/cpicon5.svg"
        icon="icon-company_information"
        title="Company Information"
        controls={null}
      />
      <Grid
        container
        spacing={{ xs: 0, sm: 2 }}
        mt={{ xs: 2, md: 0, lg: 0 }}
        mb={{ xs: 3, lg: 3 }}
        alignItems={"stretch"}
      >
        <Grid item md={7.5} xs={12} mt={{ xs: 2, sm: 0 }}>
          <Stack
            direction="row"
            alignItems="stretch"
            gap={1.5}
            flexWrap="wrap"
            sx={{}}
          >
            <Grid container spacing={1.5}>
              <>
                <Grid item xs={12} sm={6} md={6}>
                  <CPTextViewBoxCP pb={{ xs: "4px" }}>
                    <Typography component="label">Email:</Typography>
                    {userInfo?.contact_profile?.shop_email ? (
                      <Typography>
                        {user?.id == minisiteUserID
                          ? userInfo?.contact_profile?.shop_email
                          : userInfo?.contact_profile?.shop_email.substr(0, 5) +
                            "*******"}
                      </Typography>
                    ) : (
                      <Typography>N/A</Typography>
                    )}
                  </CPTextViewBoxCP>
                </Grid>
                <Grid item xs={12} sm={6} md={6}>
                  <CPTextViewBoxCP pb={{ xs: "4px" }}>
                    <Typography component="label">Phone No:</Typography>
                    {userInfo?.contact_profile?.phone ? (
                      userInfo?.contact_profile?.mobile_code &&
                      userInfo?.contact_profile?.phone && (
                        <MobileWithFlag
                          mobile_code={userInfo?.contact_profile?.mobile_code}
                          number={
                            user?.id != minisiteUserID
                              ? userInfo?.contact_profile?.phone.substr(0, 2) +
                                "*******"
                              : userInfo?.contact_profile?.phone
                          }
                        />
                      )
                    ) : (
                      <Typography>N/A</Typography>
                    )}
                  </CPTextViewBoxCP>
                </Grid>
                <Grid item xs={12} sm={6} md={6}>
                  <CPTextViewBoxCP pb={{ xs: "4px" }}>
                    <Typography component="label">Full Address:</Typography>
                    {userInfo?.location_of_registration
                      ?.registration_postalcode ? (
                      <Typography>{formatToFullAddress(userInfo)}</Typography>
                    ) : (
                      <Typography>N/A</Typography>
                    )}
                  </CPTextViewBoxCP>
                </Grid>
              </>
            </Grid>
          </Stack>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ContactDetails;