import React, { useEffect, useMemo, useState } from "react";

import { styled } from "@mui/material/styles";
import { useTranslation } from "react-i18next";

import { CustomTypography } from "../landing-page/hero-section/HeroSection.style";
import { CustomStackFullWidth } from "styled-components/CustomStyles.style";
import { NoSsr } from "@mui/material";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { useSelector } from "react-redux";

const CustomPhoneNumberInputStyled = styled(PhoneInput)(
  ({ theme, languageDirection, borderRadius }) => ({
    "&.react-tel-input .special-label": {
      fontSize: "12px !important",
      fontWeight: "400 !important",
      color: theme.palette.neutral[1000],
      left: languageDirection === "rtl" ? "80%" : "10px",
      backgroundColor: theme.palette.background.paper,
      zIndex: 2,
      display: "inline-block",
    },
    "&.react-tel-input .flag-dropdown": {
      backgroundColor: theme.palette.background.custom2,
      border: `1px solid ${theme.palette.neutral[200]}`,
      borderRadius: borderRadius,
    },
    "&.react-tel-input .selected-flag .flag": {
      right: languageDirection === "rtl" && "11px",
    },
    "&.react-tel-input .flag-dropdown.open .selected-flag": {
      backgroundColor: theme.palette.background.default,
    },
    "&.react-tel-input .country-list .search-box": {
      backgroundColor: theme.palette.background.custom2,
      color: theme.palette.neutral[600],
      height: "36px !important",
    },
    "&.react-tel-input .country-list .search": {
      backgroundColor: theme.palette.background.custom2,
    },

    "&.react-tel-input .selected-flag": {
      backgroundColor: theme.palette.neutral[100],
      borderRadius: borderRadius
        ? `${borderRadius} 0px 0px ${borderRadius} !important`
        : "10px 0px 0px 10px !important",
      width: "64px !important",
      paddingLeft: "10px !important",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      "&:hover": {
        backgroundColor: theme.palette.background.custom2,
      },
    },
    "&.react-tel-input .selected-dial-code": {
      color: theme.palette.neutral[800],
      fontWeight: 500,
      marginLeft: "2px",
    },
    "&.react-tel-input .country-list .country": {
      "&:hover": {
        backgroundColor: theme.palette.background.custom2,
      },
    },
    "&.react-tel-input .country-list .search-emoji": {
      marginInlineEnd: "10px",
      display: "none",
    },
    "&.react-tel-input .country-list": {
      backgroundColor: theme.palette.background.custom2,

      [theme.breakpoints.down("sm")]: {
        width: "300px",
      },
    },
    "&.react-tel-input .country-list .country.highlight": {
      backgroundColor: theme.palette.background.default,
    },
    "&.react-tel-input .country-list .country-name": {
      color: theme.palette.neutral[1000],
    },
    "&.react-tel-input .country-list .country .dial-code": {
      color: theme.palette.neutral[400],
    },
    "&.react-tel-input .selected-flag .arrow": {
      right: languageDirection === "rtl" ? "-20px" : "25px",
    },
    "&.react-tel-input .form-control": {
      border: `1px solid ${theme.palette.neutral[200]}`,
      backgroundColor: theme.palette.background.paper,
      color: theme.palette.neutral[1000],
      borderRadius: borderRadius ?? "5px",
      paddingLeft: languageDirection === "rtl" ? "66px" : "66px",
      marginRight: 0,
      boxSizing: "border-box",
      ...(languageDirection === "rtl" && {
        textAlign: "left",
        direction: "ltr",
        unicodeBidi: "plaintext",
      }),
      "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus":
        {
          filter: "none",
          WebkitTextFillColor: theme.palette.neutral[1000],
          WebkitBoxShadow:
            "0 0 0px 40rem " + theme.palette.neutral[200] + " inset",
        },
    },
    "&.react-tel-input .iti__flag-container": {
      left: languageDirection === "rtl" ? "unset" : 0,
      right: languageDirection === "rtl" ? 0 : "unset",
    },
    "&.react-tel-input .iti__selected-flag": {
      left: languageDirection === "rtl" ? 0 : "unset",
      right: languageDirection === "rtl" ? "unset" : 0,
    },
    "&.react-tel-input .iti__selected-flag .iti__arrow": {
      transform:
        languageDirection === "rtl" ? "rotate(180deg)" : "rotate(0deg)",
    },
  })
);
const CustomPhoneInputManual = ({
  value,
  onHandleChange,
  initCountry,
  touched,
  errors,
  lanDirection,
  height,
  borderRadius,
                                  id
}) => {
  const { configData } = useSelector((state) => state.configData);
  const { t } = useTranslation();
  const getDialCodeFromCountry = (countryCode) => {
    if (!countryCode || !PhoneInput?.getCountryData) return "";
    const selectedCountry = PhoneInput.getCountryData().find(
      (item) => item.countryCode === countryCode.toLowerCase()
    );
    return selectedCountry?.dialCode || "";
  };
  const defaultCountry = initCountry?.toLowerCase();
  const [selectedDialCode, setSelectedDialCode] = useState(
    getDialCodeFromCountry(defaultCountry)
  );
  const [phoneNumber, setPhoneNumber] = useState("");
  const getDigits = (val) => `${val || ""}`.replace(/\D/g, "");
  const getLocalNumber = (fullNumber, dialCode) => {
    const digits = getDigits(fullNumber);
    if (!dialCode || !digits.startsWith(dialCode)) return digits;
    return digits.slice(dialCode.length);
  };
  const changeHandler = (phone, countryData) => {
    const dialCode = countryData?.dialCode || selectedDialCode || "";
    const currentValue = getDigits(phone);
    const nationalNumber = getLocalNumber(currentValue, dialCode);
    setSelectedDialCode(dialCode);
    setPhoneNumber(nationalNumber);
    onHandleChange(`${dialCode}${nationalNumber}`);
  };
  useEffect(() => {
    setSelectedDialCode(getDialCodeFromCountry(defaultCountry));
  }, [defaultCountry]);

  useEffect(() => {
    const fullDigits = getDigits(value);
    const localNumber = getLocalNumber(fullDigits, selectedDialCode);
    setPhoneNumber(localNumber);
  }, [value, selectedDialCode]);

  const displayValue = useMemo(
    () => `${selectedDialCode}${phoneNumber}`,
    [selectedDialCode, phoneNumber]
  );
  return (
    <NoSsr>
      <CustomStackFullWidth alignItems="flex-start" spacing={0.8}>
        {lanDirection && (
          <>
            <CustomPhoneNumberInputStyled
              borderRadius={borderRadius}
              autoFormat={false}
              placeholder={t("Enter phone number")}
              value={displayValue}
              copyNumbersOnly
              enableSearchField
              enableSearch
              separateDialCode
              countryCodeEditable={false}
              onChange={changeHandler}
              inputProps={{
                required: true,
                autoFocus: true,
                onKeyDown: (e) => {
                  if (["+", "-", "e", "E"].includes(e.key)) {
                    e.preventDefault();
                  }
                },
              }}
              specialLabel={t("Phone")}
              country={defaultCountry}
              searchStyle={{ margin: "0", width: "95%", height: "50px" }}
              inputStyle={{
                width: "100%",
                height: height ? height : "56px",
                borderRadius: borderRadius ? borderRadius : "5px",
              }}
              languageDirection={lanDirection}
              buttonClass={{ "background-color": "red" }}
              {...(configData?.country_picker_status !== 1 && {
                disableDropdown: true,
              })}
            />
          </>
        )}
        {touched && errors && (
          <CustomTypography
            variant="caption"
            sx={{
              ml: "10px",
              fontWeight: "inherit",
              color: (theme) => theme.palette.error.main,
            }}
          >
            {errors}
          </CustomTypography>
        )}
      </CustomStackFullWidth>
    </NoSsr>
  );
};
export default CustomPhoneInputManual;