import React, { useState } from 'react';
import GlobalMarketingHighlights from 'src/components/globalMarketingHighlights';
import StoreMarketingHighlights from 'src/components/storeMarketingHighlights';
import TerritoryListModal from 'src/components/territoryListModal';
import TerritoryMarketingHighlights from 'src/components/territoryMarketingHighlights';
import type { FC } from 'react';
import type {
    MarketingHighlight,
    MarketingHighlightsState,
    Territory,
} from 'src/types';

export interface ProjectMarketingHighlightsProps {
    editable: boolean;
    marketingHighlightsState: MarketingHighlightsState;
    marketingTerritories: Territory[];
}

export const ProjectMarketingHighlights: FC<
    ProjectMarketingHighlightsProps
> = ({ editable, marketingHighlightsState, marketingTerritories }) => {
    const className = 'ProjectMarketingHighlights';
    const i18nPrefix = 'marketingSection.projectMarketingHighlights';

    const [isTerritoryListModalOpen, setTerritoryListModalOpen] =
        useState<boolean>(false);
    const handleModalOpen = () => setTerritoryListModalOpen(true);

    const { projectMarketingHighlights, setProjectMarketingHighlights } =
        marketingHighlightsState;

    const onTerritoryMarketingHighlightsAdd =
        (marketingHighlights: MarketingHighlight[]) =>
        (newTerritories: Territory[]) => {
            const data = [...marketingHighlights];
            data.push(
                ...newTerritories.map(newT => ({
                    marketingHighlight: '',
                    ...newT,
                }))
            );
            setProjectMarketingHighlights(data);
        };

    const globalMarketingHighlights =
        projectMarketingHighlights?.find(e => !e.countryId && !e.store)
            ?.marketingHighlight || '';
    const setGlobalMarketingHighlights =
        (marketingHighlights: MarketingHighlight[]) => (value: string) =>
            setProjectMarketingHighlights(
                marketingHighlights.map(item =>
                    !item.countryId && !item.store
                        ? { ...item, marketingHighlight: value }
                        : item
                )
            );

    const storeMarketingHighlights =
        projectMarketingHighlights?.filter(e => e.store) || [];
    const setStoreMarketingHighlights =
        (marketingHighlights: MarketingHighlight[]) =>
        (storeMarketingHighlights: MarketingHighlight[]) =>
            setProjectMarketingHighlights([
                ...marketingHighlights.filter(e => !e.store),
                ...storeMarketingHighlights,
            ]);

    const territoryMarketingHighlights =
        projectMarketingHighlights?.filter(e => e.countryId) || [];
    const setTerritoryMarketingHighlights =
        (marketingHighlights: MarketingHighlight[]) =>
        (territoryMarketingHighlights: MarketingHighlight[]) =>
            setProjectMarketingHighlights([
                ...marketingHighlights.filter(e => !e.countryId),
                ...territoryMarketingHighlights,
            ]);

    return (
        <div className={className} data-testid="project-marketing-highlights">
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
            </div>
            <div className={`${className}-body`}>
                <GlobalMarketingHighlights
                    editable={editable}
                    globalMarketingHighlights={globalMarketingHighlights}
                    setGlobalMarketingHighlights={setGlobalMarketingHighlights(
                        projectMarketingHighlights
                    )}
                />
                <TerritoryMarketingHighlights
                    editable={editable}
                    territoryMarketingHighlights={territoryMarketingHighlights}
                    setTerritoryMarketingHighlights={setTerritoryMarketingHighlights(
                        projectMarketingHighlights
                    )}
                    handleModalOpen={handleModalOpen}
                />
                <StoreMarketingHighlights
                    editable={editable}
                    storeMarketingHighlights={storeMarketingHighlights}
                    setStoreMarketingHighlights={setStoreMarketingHighlights(
                        projectMarketingHighlights
                    )}
                />
            </div>
            <TerritoryListModal
                marketingTerritories={marketingTerritories}
                existingTerritories={
                    territoryMarketingHighlights as Territory[]
                }
                isOpen={isTerritoryListModalOpen}
                setIsOpen={setTerritoryListModalOpen}
                onAdd={onTerritoryMarketingHighlightsAdd(
                    projectMarketingHighlights
                )}
            />
        </div>
    );
};

export default ProjectMarketingHighlights;