import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import ReactFlagsSelect from 'react-flags-select';
import './style.scss';
import { Countries, CountryCode } from '../../types';
const PhoneNumberInputField = ({ placeholderText = 'Enter Your Phone Number', defaultCountry = 'PK', handlePhoneChange = (value) => {
    alert(value);
}, }) => {
    const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
    const [phoneNumber, setphonNumber] = useState('');
    const handleChange = (event) => {
        if (event.target.value.length >= 9) {
            let country_code = Countries[selectedCountry].secondary;
            handlePhoneChange(country_code + '' + event.target.value);
        }
        setphonNumber(event.target.value);
    };
    const handleCountryChange = (country) => {
        setSelectedCountry(country);
    };
    return (_jsxs("div", { className: "number-input", children: [_jsx(ReactFlagsSelect, { countries: CountryCode, customLabels: Countries, selected: selectedCountry, showSelectedLabel: false, onSelect: handleCountryChange, searchable: true, fullWidth: true, alignOptionsToRight: true, className: "custom-country-select" }), _jsx("input", { type: "number", placeholder: placeholderText, value: phoneNumber, onChange: handleChange, className: "custom-phone-input" })] }));
};
export default PhoneNumberInputField;
