import React, { useEffect, useState } from 'react';
import { Label } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { getAlphaCodes, getCountryName } from 'src/utils/country';

export interface ContractCountriesPropType {
    contractExclusion: any;
}

const ContractCountries: React.FC<ContractCountriesPropType> = ({
    contractExclusion,
}) => {
    const alphaMap = getAlphaCodes();
    const [includedCountries, setIncludedCountries] = useState<string[]>([]);
    const [excludedCountries, setExcludedCountries] = useState<string[]>([]);
    const includedCountriesArray: any = [];
    const excludedCountriesArray: any = [];
    const excludedCountriesNames: string[] = [];

    useEffect(() => {
        if (
            contractExclusion?.exclusions &&
            'countries' in contractExclusion.exclusions
        ) {
            const { countries } = contractExclusion.exclusions;
            if (!isEmpty(countries)) {
                countries.forEach((countryCode: string) => {
                    const countryName = getCountryName(countryCode);
                    excludedCountriesArray.push({
                        label: countryName,
                        value: countryCode,
                    });
                    excludedCountriesNames.push(countryName);
                });
                Object.keys(alphaMap).forEach((countryCode: string) => {
                    const countryName = getCountryName(countryCode);
                    if (!excludedCountriesNames.includes(countryName))
                        includedCountriesArray.push({
                            label: countryName,
                            value: countryCode,
                        });
                });

                if (excludedCountriesArray)
                    setExcludedCountries(
                        excludedCountriesArray.sort((a: any, b: any) =>
                            a.label.localeCompare(b.label)
                        )
                    );
                if (includedCountriesArray)
                    setIncludedCountries(
                        includedCountriesArray.sort((a: any, b: any) =>
                            a.label.localeCompare(b.label)
                        )
                    );
            }
        }
    }, [contractExclusion]);

    const displayCountries = (countriesData: any) => (
        <ul>
            {countriesData.map(({ label, value }: any) => (
                <li key={value} className="ContractCountriesTable-country">
                    {label}
                </li>
            ))}
        </ul>
    );

    return (
        <div className="ContractDetail-countries">
            <h3 className="ContractDetail-header">Countries</h3>
            <hr />
            <div>
                <div className="ContractCountriesTable-deliveringCountries">
                    <div className="ContractCountriesTable-header">
                        <Label text="Delivering to" />
                    </div>
                    <div className="ContractCountriesTable-countriesList">
                        {!isEmpty(includedCountries) &&
                        Object.keys(alphaMap).length !==
                            includedCountries.length ? (
                            displayCountries(includedCountries)
                        ) : (
                            <div className="ContractCountriesTable-country">
                                {isEmpty(excludedCountries) ? 'All' : 'None'}
                            </div>
                        )}
                    </div>
                </div>
                <div className="ContractCountriesTable-nonDeliveringCountries">
                    <div className="ContractCountriesTable-header">
                        <Label text="Not Delivering to" />
                    </div>
                    <div className="ContractCountriesTable-countriesList">
                        {!isEmpty(excludedCountries) &&
                        Object.keys(alphaMap).length !==
                            excludedCountries.length ? (
                            displayCountries(excludedCountries)
                        ) : (
                            <div className="ContractCountriesTable-country">
                                {isEmpty(excludedCountries) ? 'None' : 'All'}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ContractCountries;