import React from "react";
import ReactPhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/dist/style.css'
import style from "./FancyPhoneInput.module.sass";

const FancyPhoneInput = (props) => {
    const {input, label, type, meta: { asyncValidating, touched, error }} = props;


    const styleValidationHandlerInput = () => {

        if(touched && error) {
            return style.inputError;
        }else if(touched && !error) {
            return style.inputValid
        }
    };

    const styleValidationHandlerButton = () => {

        if(touched && error) {
            return style.buttonError;
        }else if(touched && !error) {
            return style.buttonValid
        }
    };


    return(
      <div className={style.mainContainer}>
          <label>{label}</label>
          <ReactPhoneInput
              defaultCountry="ua"
              {...input}
              disableDropdown={true}
              countryCodeEditable={false}
              inputClass={styleValidationHandlerInput()}
              buttonClass={styleValidationHandlerButton()}
          />
          {touched && error && <span>{error}</span>}
      </div>
    );
};


export default (FancyPhoneInput);