import { Modal } from '@theorchard/suite-components';
import dayjs from 'dayjs';
import React, { useState } from 'react';
import ReleaseScheduleDisplay from '../releaseScheduleDisplay';
import ReleaseScheduleTable from '../releaseScheduleTable';
import StaggeredReleaseScheduleEditor from './staggeredReleaseScheduleEditor';
import type { FC } from 'react';
import type {
    AddToStaggeredReleaseParams,
    DeliveryStore,
    Product,
    ReleaseSchedule,
    StaggeredReleaseSchedule,
} from 'src/types';

export interface StaggeredReleaseScheduleModalProps {
    isOpen: boolean;
    setIsOpen: (isOpen: boolean) => void;
    deliveryStores: DeliveryStore[];
    carvedOutStores: DeliveryStore[];
    product: Product;
    onSave: (releaseSchedule: StaggeredReleaseSchedule[]) => void;
}

const StaggeredReleaseScheduleModal: FC<StaggeredReleaseScheduleModalProps> = ({
    isOpen,
    setIsOpen,
    deliveryStores,
    carvedOutStores,
    product,
    onSave,
}) => {
    const [releaseSchedule, setReleaseSchedule] = useState<
        StaggeredReleaseSchedule[]
    >(product.releaseSchedule.staggered);

    const handleAddToSchedule = ({
        deliveryStores,
        saleDate,
    }: AddToStaggeredReleaseParams) => {
        const update: StaggeredReleaseSchedule[] = [
            ...releaseSchedule,
            ...deliveryStores.map(deliveryStore => ({
                deliveryStore,
                saleDate: dayjs(saleDate).format('YYYY-MM-DD'),
            })),
        ];
        setReleaseSchedule(update);
    };

    const handleRemove = (schedules: ReleaseSchedule[] | ReleaseSchedule) => {
        const scheduledStores = Array.isArray(schedules)
            ? schedules
            : [schedules];
        setReleaseSchedule(
            [...releaseSchedule].filter(
                stag => !scheduledStores.some(schedule => schedule === stag)
            )
        );
    };

    const unscheduledStores = deliveryStores.filter(
        store =>
            !releaseSchedule.some(
                stagStore => stagStore.deliveryStore.id === store.id
            )
    );

    const alreadySelectedStores: DeliveryStore[] = [
        ...product.releaseSchedule.timed.map(
            releaseEntry => releaseEntry.deliveryStore
        ),
        ...product.releaseSchedule.unsupportedTimed.map(
            releaseEntry => releaseEntry.deliveryStore
        ),
        ...product.releaseSchedule.staggered.map(
            releaseEntry => releaseEntry.deliveryStore
        ),
    ];

    return (
        <Modal
            confirmTitle={$t(
                'releaseScheduler.staggeredReleaseScheduleModal.saveAndClose'
            )}
            confirmDisabled={false}
            onConfirm={() => {
                setIsOpen(false);
                onSave(releaseSchedule);
            }}
            testId="staggered-release-schedule-modal"
            className="StaggeredReleaseScheduleModal"
            title={$t('releaseScheduler.releaseScheduleOaPanel.header')}
            isOpen={isOpen}
            onRequestClose={() => {
                setReleaseSchedule(product.releaseSchedule.staggered);
                setIsOpen(false);
            }}
        >
            <div className="StaggeredReleaseScheduleModal">
                <StaggeredReleaseScheduleEditor
                    className="StaggeredReleaseScheduleModal-editor"
                    product={product}
                    deliveryStores={unscheduledStores}
                    disabledStores={alreadySelectedStores}
                    carvedOutStores={carvedOutStores}
                    onAddToSchedule={handleAddToSchedule}
                />
                <ReleaseScheduleDisplay
                    title={$t(
                        'releaseScheduler.staggeredReleaseScheduleModal.releaseScheduleDisplayTitle'
                    )}
                    product={product}
                >
                    <ReleaseScheduleTable
                        className="StaggeredReleaseScheduleModal-table"
                        onRemove={handleRemove}
                        releaseSchedule={releaseSchedule}
                        editable={true}
                    />
                </ReleaseScheduleDisplay>
            </div>
        </Modal>
    );
};

export default StaggeredReleaseScheduleModal;