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

const CLASS_NAME = 'CountriesMultiSelect';

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

const CountriesMultiSelect: FC<Props> = ({ territories, onApply }) => {
    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
            onChange={handleChange}
            onApply={handleApply}
            sectionGroupSelect
            countries={dropdownCountries}
            excludeModeText={$t(
                'fingerprintRestrictions.addFingerprintRestriction.sidecar.excludeModeText'
            )}
        />
    );
};

export default CountriesMultiSelect;