import { useState, useEffect } from "react";
import { options } from "./options";
import { FixedSizeList as List } from "react-window";
import { StyledBox } from "./styled-input-phone";
import { InvalidFlag } from "./svg";
import PropTypes from "prop-types";
import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
import Box from "@docspace/components/box";
import ComboBox from "@docspace/components/combobox";
import Label from "@docspace/components/label";
import TextInput from "@docspace/components/text-input";
import SearchInput from "@docspace/components/search-input";
import DropDown from "@docspace/components/drop-down";
import DropDownItem from "@docspace/components/drop-down-item";
import Text from "@docspace/components/text";
const InputPhone = ({
defaultCountry,
onChange,
scaled,
phonePlaceholderText,
searchPlaceholderText,
searchEmptyMessage,
errorMessage,
} = props) => {
const [country, setCountry] = useState(defaultCountry);
const [phoneValue, setPhoneValue] = useState(country.dialCode);
const [searchValue, setSearchValue] = useState("");
const [filteredOptions, setFilteredOptions] = useState([]);
const [isOpen, setIsOpen] = useState(false);
const [isValid, setIsValid] = useState(true);
const onInputChange = (e) => {
const str = e.target.value.replace(/\D/g, "");
const el = options.find(
(option) => option.dialCode && str.startsWith(option.dialCode)
);
const singleŠ”ode = ["1", "7"];
const invalidCode = singleŠ”ode.find((code) => code === str);
if (e.target.value === "" || !e.target.value.includes(invalidCode)) {
setIsValid(false);
setCountry((prev) => ({ ...prev, icon: InvalidFlag }));
}
setPhoneValue(e.target.value);
if (el) {
setIsValid(true);
setCountry({
locale: el.code,
mask: el.mask,
icon: el.flag,
});
}
onChange && onChange(e);
};
const onCountrySearch = (value) => {
setSearchValue(value);
};
const onClearSearch = () => {
setSearchValue("");
};
const getMask = (locale) => {
return options.find((option) => option.code === locale).mask;
};
const handleClick = () => {
setIsOpen(!isOpen);
};
useEffect(() => {
if (isOpen) {
setFilteredOptions(
options.filter(
(val) =>
val.name.toLowerCase().startsWith(searchValue.toLowerCase()) ||
val.dialCode.startsWith(searchValue.toLowerCase())
)
);
}
}, [isOpen, searchValue]);
const onCountryClick = (e) => {
const data = e.currentTarget.dataset.option;
const country = filteredOptions[data];
setIsOpen(!isOpen);
setCountry({
locale: country.code,
mask: country.mask,
icon: country.flag,
});
setIsValid(true);
setPhoneValue(country.dialCode);
};
const Row = ({ data, index, style }) => {
const country = data[index];
const prefix = "+";
return (
{country.name}
{prefix}
{country.dialCode}
);
};
return (
{filteredOptions.length ? (
{Row}
) : (
{searchEmptyMessage}
)}
{!isValid && (
{errorMessage}
)}
);
};
InputPhone.propTypes = {
/** Default selected country Russia */
defaultCountry: PropTypes.object.isRequired,
/** Text displayed on the Input placeholder */
phonePlaceholderText: PropTypes.string,
/** Text displayed on the SearchInput placeholder */
searchPlaceholderText: PropTypes.string,
/** Indicates the input field has scaled */
scaled: PropTypes.bool,
/** Called when value is changed */
onChange: PropTypes.func,
/** Gets the country mask */
searchEmptyMessage: PropTypes.string,
/** Text is displayed when invalid country dial code */
errorMessage: PropTypes.string,
};
InputPhone.defaultProps = {
defaultCountry: {
locale: options[182].code, // default locale RU
dialCode: options[182].dialCode, // default dialCode +7
mask: options[182].mask, // default Russia mask
icon: options[182].flag, // default Russia flag
},
phonePlaceholderText: "",
searchPlaceholderText: "",
scaled: false,
searchEmptyMessage: "",
errorMessage: "",
};
InputPhone.displayName = "InputPhone";
export default InputPhone;