/**
 * Component used for Phone number input with country code
 *
 * @author Hasna
 *
 * Ensure to follow a minimal standard
 */
import React, { useState, useEffect, useRef } from 'react';

import PhoneInput from 'react-phone-input-2';

import 'react-phone-input-2/lib/style.css';

import PropTypes from "prop-types";

import './phone-input.scss';


export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {

  let inputRef = useRef();

  const [phone, setPhone] = useState();

  useEffect(() => {
    if (value && value.code && value.code.dialCode !== null) {
      // To prepopulate phone number ,concat dialCode and phone number
      setPhone(value.code.dialCode + value.value);

      // In case of update , to identify the country code that is getting selected
      // We are setting a timeout
      setTimeout(() => {
        // Using the reference , we get the internal state of the library component
        let selectedCountry = null;

        let selectedCode = null;

        if (
          inputRef.current &&
          inputRef.current.state &&
          inputRef.current.state.selectedCountry
        ) {
          selectedCountry = inputRef.current.state.selectedCountry;

          // Once we get the selected country ,we format it to the form that is received for normal onChange
          selectedCode = {
            countryCode: selectedCountry.iso2,
            dialCode: selectedCountry.dialCode,
            name: selectedCountry.name,
          };
        }

        // Below being the format expected , we trigger the onChange to manually update the form
        let updatedValue = {
          value: value.code.dialCode + value.value,
          code: selectedCode,
        };

        onChange(updatedValue);
      }, 0);
    }
  }, []);

  /**
   * To get value in parent component
   * @param {*} value
   */
  function handleInput(value, code) {
    if (code.dialCode) {
      value = value.substring(code.dialCode.length);
    }
    // To get country code with phone number in parent component
    value = {
      value,
      code,
    };
    onChange(value);
  }

  return (
    <div className="phone-input">
      <PhoneInput
        ref={inputRef}
        country={defaultCountryCode || 'in'}
        // country={disableCountryCode ? false : 'in'}
        value={phone}
        onChange={handleInput}
        inputProps={{ required: required }}
        disabled={disabled}
        onBlur={onBlur}
      />
    </div>
  );
}

CountryPhoneInput.propTypes = {
  /** A string representing the current value of the input. This prop is optional. */
  value: PropTypes.string,
  /** A function that will be called when the value of the input changes. This prop is required. */
  onChange: PropTypes.func.isRequired,
  /** A boolean indicating whether the input should be disabled or not. This prop is optional. */
  disabled: PropTypes.bool,
  /** A boolean indicating whether the country code portion of the input should be disabled or not. This prop is optional. */
  disableCountryCode: PropTypes.bool,
  /** A boolean indicating whether the input is required or not. This prop is optional. */
  required: PropTypes.bool,
};