import { Modal, SearchInput } from '@theorchard/suite-components';
import React, { useState } from 'react';
import TerritoryList from 'src/components/territoryList';
import type { FC } from 'react';
import type { Territory } from 'src/types';

export interface TerritoryListModalProps {
    marketingTerritories: Territory[];
    existingTerritories: Territory[];
    isOpen: boolean;
    setIsOpen: (isOpen: boolean) => void;
    onAdd: (newTerritories: Territory[]) => void;
}

export const TerritoryListModal: FC<TerritoryListModalProps> = ({
    marketingTerritories,
    existingTerritories,
    isOpen,
    setIsOpen,
    onAdd,
}) => {
    const className = 'TerritoryListModal';
    const i18nPrefix = 'marketingSection.territoryListModal';

    const topMarket = 'Top Market';
    const topTerritoriesList = marketingTerritories?.filter(
        terr => terr.category === topMarket
    );
    const territoriesList = marketingTerritories?.filter(
        terr => terr.category !== topMarket
    );

    const exisitingFilter = (terr: Territory) =>
        !existingTerritories.find(
            (ex: Territory) => terr.countryId === ex.countryId
        );

    const [searchTerm, setSearchTerm] = useState<string>('');
    const searchFilter = (terr: Territory) =>
        !searchTerm ||
        terr.name.toUpperCase().includes(searchTerm.toUpperCase());

    const [selectedTopTerritories, setSelectedTopTerritories] = useState<
        Territory[]
    >([]);
    const updateSelectedTopTerritories = (newT: Territory[]) =>
        setSelectedTopTerritories([
            ...newT,
            ...selectedTopTerritories.filter(e => !searchFilter(e)),
        ]);

    const [selectedTerritories, setSelectedTerritories] = useState<Territory[]>(
        []
    );
    const updateSelectedTerritories = (newT: Territory[]) =>
        setSelectedTerritories([
            ...newT,
            ...selectedTerritories.filter(e => !searchFilter(e)),
        ]);

    const onClose = () => {
        setSelectedTopTerritories([]);
        setSelectedTerritories([]);
        setSearchTerm('');
        setIsOpen(false);
    };

    return (
        <Modal
            className={`${className}-modal`}
            testId="add-priority-territories-modal"
            title={$t(`${i18nPrefix}.header`)}
            isOpen={isOpen}
            onRequestClose={onClose}
            onConfirm={() => {
                onAdd([
                    ...selectedTopTerritories.sort((a, b) =>
                        a.name > b.name ? 1 : -1
                    ),
                    ...selectedTerritories.sort((a, b) =>
                        a.name > b.name ? 1 : -1
                    ),
                ]);
                onClose();
            }}
            confirmTitle={$t(`${i18nPrefix}.saveAndClose`)}
        >
            <SearchInput
                className={`${className}-search-input`}
                onChange={setSearchTerm}
                expanded
                placeholder={$t(`${i18nPrefix}.searchPlaceholder`)}
            />
            <TerritoryList
                title={$t(`${i18nPrefix}.topMarketTitle`)}
                territories={topTerritoriesList
                    ?.filter(exisitingFilter)
                    ?.filter(searchFilter)}
                setSelectedTerritories={updateSelectedTopTerritories}
            />
            <TerritoryList
                title={$t(`${i18nPrefix}.countryListTitle`)}
                territories={territoriesList
                    ?.filter(exisitingFilter)
                    ?.filter(searchFilter)}
                setSelectedTerritories={updateSelectedTerritories}
            />
        </Modal>
    );
};

export default TerritoryListModal;