import React from "react";
import styled from "styled-components";
import ReactPhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import Label from "../Label/Label";
import HelperText from "../HelperText/HelperText";
import { Flex } from "antd";

const StyledPhoneInput = styled(ReactPhoneInput)`
  ${(props) => {
    const isError = props.error;
    const borderRadius = props.theme?.antdToken?.borderRadius;
    const controlHeight = props.theme?.antdToken?.controlHeight;
    const colorText = props.theme?.antdToken?.colorText;
    const colorTextPlaceholder = props.theme?.antdToken?.colorTextPlaceholder;
    const colorPrimary = props.theme?.antdToken?.colorPrimary;
    const colorBorder = props.theme?.antdToken?.colorBorder;
    const colorError = props.theme?.colors?.errorColor;
    const direction = props.direction;

    return `
      .phone-container {
        width: 100%;
        padding: 0;
      }

      .phone-input {
        width: 100% !important;
        border-radius: ${borderRadius + "px" || "8px"};
        height: ${controlHeight + "px" || "40px"} !important;
        color: ${isError ? colorError : colorText};
        border: ${isError ? `1px solid ${colorError}` : `1px solid ${colorBorder}`} !important;
        background-color: #fff !important;

        &::placeholder {
          color: ${colorTextPlaceholder + "px" || "8px"};
        }

        ${
          direction === "rtl" &&
          `
            text-align: right;
            padding-right: 48px;
        `
        }

        &:hover {
         border-color: ${isError ? colorError : colorPrimary} !important;
        }

        &:hover,
        &:hover ~ .phone-btn,
        .phone-btn:hover ~ & {
          border-color: ${isError ? colorError : colorPrimary || "#3498db"} !important;
        }

        &:focus,
        &:focus ~ .phone-btn,
        .phone-btn:focus ~ & {
          border-color: ${isError ? colorError : colorPrimary || "#3498db"} !important;
        }
      }

      .phone-btn {
        border-radius: ${
          direction === "rtl"
            ? `0 ${borderRadius}px ${borderRadius}px 0`
            : `${borderRadius}px 0 0 ${borderRadius}px !important;`
        };
        height: ${controlHeight + "px" || "40px"};
        border: ${isError ? `1px solid ${colorError}` : `1px solid ${colorBorder}`} !important;

        &:hover {
          border-color: ${isError ? colorError : colorPrimary || "#3498db"} !important;
        }

        .selected-flag {
          background-color: transparent;
          border-radius: ${
            direction === "rtl"
              ? `0 ${borderRadius}px ${borderRadius}px 0`
              : `${borderRadius}px 0 0 ${borderRadius}px !important`
          };
        }

        .phone-search-box {
          border-radius: ${borderRadius + "px" || "8px"} !important;
          height: ${controlHeight + "px" || "40px"};
          color: ${isError ? colorError : colorText};

          &::placeholder {
            color: ${colorTextPlaceholder + "px" || "8px"};
          }
        }

         ${
           direction === "rtl"
             ? `
              .arrow {
                right: 8px;
              }
            `
             : ``
         }
      }

      .phone-dropdown {
        padding: 0;
        font-size: 14px;
        list-style: none;
        border: 1px solid #ccc;
        border-radius: ${borderRadius}px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        
        /* Scrollbar Styling */
        overflow-anchor: none;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
          width: 8px;
        }

        &::-webkit-scrollbar-track {
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 99px;
          border: 2px solid transparent;
          background-clip: content-box;
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: #bfbfbf;
        }
      }
    `;
  }}
`;

const PhoneInput = (props) => {
  const { label, required, error, helperText, ...rest } = props;
  const direction = window.getComputedStyle(document.body).direction;

  return (
    <Flex vertical>
      {label && <Label label={label} required={required} />}
      <StyledPhoneInput
        direction={localStorage.getItem("currentlanguage") === "ar" ? "rtl" : direction}
        enableSearch
        containerClass={"phone-container"}
        inputClass={"phone-input"}
        buttonClass={"phone-btn"}
        dropdownClass={"phone-dropdown"}
        searchClass={"phone-search"}
        ref={props?.inputRef}
        {...props}
      />
      {helperText && <HelperText error={error}>{helperText}</HelperText>}
    </Flex>
  );
};

export default PhoneInput;