import React, { useState } from 'react';
import { PriorityType } from 'shared/data/schema';
import MarketingPriorityInternalNotes from 'src/components/marketingPriorityInternalNotes';
import MarketingPriorityLevelPicker from 'src/components/marketingPriorityLevelPicker';
import MarketingPriorityTable from 'src/components/marketingPriorityTable';
import TerritoryListModal from 'src/components/territoryListModal';
import type { FC } from 'react';
import type {
    MarketingPriorityState,
    Territory,
    TerritoryMarketingPriority,
} from 'src/types';

export interface MarketingPriorityProps {
    editable: boolean;
    marketingTerritories: Territory[];
    marketingPriorityState: MarketingPriorityState;
}

const MarketingPriority: FC<MarketingPriorityProps> = ({
    editable,
    marketingTerritories,
    marketingPriorityState,
}) => {
    const className = 'MarketingPriority';
    const i18nPrefix = 'marketingSection.marketingPriority';

    const {
        projectProductCount,
        isProjectLevel,
        internalNote,
        marketingPriority,
        setProjectLevel,
    } = marketingPriorityState;

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

    const exisitingTerritories = marketingPriority;

    const [page, setPage] = useState<number>(0);
    const [pageSize, setPageSize] = useState<number>(10);
    const pageState = {
        page,
        setPage,
        pageSize,
        setPageSize,
    };

    const handleProjectLevelChange =
        (
            setProjectLevel: (isProjectLevel: boolean | null) => void,
            setPage: (page: number) => void
        ) =>
        (projectLevelToSet: boolean | null) => {
            setProjectLevel(projectLevelToSet);
            setPage(0);
        };

    const onMarketingPriorityAdd =
        (marketingPriorityState: MarketingPriorityState) =>
        (newTerritories: Territory[]) => {
            const { marketingPriority, setMarketingPriority } =
                marketingPriorityState;
            const data = [...marketingPriority];
            data.push(
                ...newTerritories.map(newT => ({
                    priorityId: undefined,
                    priorityType: PriorityType.B,
                    territoryId: newT.countryId,
                    ...newT,
                }))
            );
            setMarketingPriority(data);
        };

    const onMarketingPriorityChange =
        (marketingPriorityState: MarketingPriorityState) =>
        (row: TerritoryMarketingPriority, newPriority: PriorityType) => {
            const { marketingPriority, setMarketingPriority } =
                marketingPriorityState;
            const data = [...marketingPriority];
            const indexToChange = data.findIndex(
                e => e.countryId === row.countryId
            );
            data[indexToChange].priorityType = newPriority;
            setMarketingPriority(data);
        };

    const onMarketingPriorityRemove =
        (marketingPriorityState: MarketingPriorityState) =>
        (row: TerritoryMarketingPriority) => {
            const { marketingPriority, setMarketingPriority } =
                marketingPriorityState;
            const data = [...marketingPriority];
            setMarketingPriority(
                data.filter(e => e.countryId !== row.countryId)
            );
        };

    const onInternalNoteChange =
        (marketingPriorityState: MarketingPriorityState) =>
        (newValue: string) => {
            const { setInternalNote } = marketingPriorityState;
            setInternalNote(newValue);
        };

    return (
        <div className={className} data-testid="marketing-priority">
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
            </div>
            <div className={`${className}-body`}>
                <MarketingPriorityLevelPicker
                    editable={editable}
                    projectProductCount={projectProductCount}
                    isProjectLevel={isProjectLevel}
                    handleProjectLevelChange={handleProjectLevelChange(
                        setProjectLevel,
                        setPage
                    )}
                />
                {isProjectLevel !== null && (
                    <MarketingPriorityTable
                        editable={editable}
                        marketingPriority={marketingPriority}
                        pageState={pageState}
                        onModalOpen={handleModalOpen}
                        onMarketingPriorityChange={onMarketingPriorityChange(
                            marketingPriorityState
                        )}
                        onMarketingPriorityRemove={onMarketingPriorityRemove(
                            marketingPriorityState
                        )}
                    />
                )}
                <MarketingPriorityInternalNotes
                    editable={editable}
                    internalNote={internalNote}
                    onInternalNoteChange={onInternalNoteChange(
                        marketingPriorityState
                    )}
                />
            </div>
            <TerritoryListModal
                marketingTerritories={marketingTerritories}
                existingTerritories={exisitingTerritories}
                isOpen={isTerritoryListModalOpen}
                setIsOpen={setTerritoryListModalOpen}
                onAdd={onMarketingPriorityAdd(marketingPriorityState)}
            />
        </div>
    );
};

export default MarketingPriority;