import type { FC } from 'react';
import React from 'react';
import { MarketSelector } from '@theorchard/suite-components';
import type { CountryOption } from '@theorchard/suite-components';
import type { Territory } from 'src/data/queries/territories/types';

const CLASS_NAME = 'CountriesMultiSelect';

interface Props {
    onApply: (countries: CountryOption[]) => void;
    territories: Territory[];
}

const CountriesMultiSelect: FC<Props> = ({ onApply, territories }) => {
    let selected: CountryOption[] = [];

    const dropdownCountries =
        territories?.map(country => ({
            value: country.territoryCodeA2,
            continent: country.continent,
        })) ?? [];

    const handleChange = (items: CountryOption[]) => {
        selected = items;
    };

    const handleApply = () => onApply(selected);

    return (
        <MarketSelector
            testId="country-dropdown"
            className={CLASS_NAME}
            menuMinWidth="auto"
            menuWidth="100%"
            excludeMode
            showExcludeMode
            excludeModeText={$t(
                'contentReview.addFingerprintRestriction.sidecar.excludeModeText'
            )}
            onChange={handleChange}
            onApply={handleApply}
            sectionGroupSelect
            countries={dropdownCountries}
        />
    );
};

export default CountriesMultiSelect;