import React, { useState, useEffect } from 'react';
import Modal from '../../Modal';
import PropTypes from 'prop-types';
import Header from './header';
import List from './list';
import COUNTRIES from './countries';
import filterCollection from '../../../libs/utils/filterCollection';
// import debounce from '../../../libs/utils/debounce';
export const CountryPropTypes = {
    flagIcon: PropTypes.node.isRequired,
    countryCode: PropTypes.string.isRequired,
    country: PropTypes.string.isRequired,
    isoCode: PropTypes.string.isRequired,
};
const CountryPickerModal = props => {
    const { isOpen, onRequestClose, onSelect } = props;
    const [query, setQuery] = useState('');
    const [filteredCountries, setFilteredCountries] = useState([]);
    useEffect(() => {
        // TODO: debounce filter
        setFilteredCountries(filterCollection({
            query,
            collection: COUNTRIES,
            mapValuesToStringFn: item => item.country,
        }));
    }, [query]);
    return (<Modal isOpen={isOpen} title={<Header onSearch={setQuery} query={query}/>} onRequestClose={onRequestClose}>
            <List data={filteredCountries} onSelect={onSelect}/>
        </Modal>);
};
CountryPickerModal.propTypes = {
    isOpen: PropTypes.bool,
    onRequestClose: PropTypes.func,
    onSelect: PropTypes.func,
};
CountryPickerModal.defaultProps = {
    isOpen: false,
    onRequestClose: () => { },
    onSelect: () => { },
};
export default CountryPickerModal;
