import cx from 'classnames';
import React, { useState } from 'react';
import TimedReleaseStoreSelector from '../timedReleaseStoreSelector';
import TimedReleaseTimeSelector from '../timedReleaseTimeSelector';
import type { FC } from 'react';
import type {
    AddToTimedReleaseParams,
    DeliveryStore,
    Product,
} from 'src/types';

export interface TimedReleaseScheduleEditorProps {
    className?: string;
    deliveryStores: DeliveryStore[];
    disabledStores: DeliveryStore[];
    carvedOutStores: DeliveryStore[];
    product: Product;
    hasTimedReleases: boolean;
    existingSaleDateTime?: Date;
    existingTimeOffset?: string;
    onAddToSchedule: (params: AddToTimedReleaseParams) => void;
}

const TimedReleaseScheduleEditor: FC<TimedReleaseScheduleEditorProps> = ({
    className,
    deliveryStores,
    disabledStores,
    carvedOutStores,
    product,
    hasTimedReleases,
    existingSaleDateTime,
    existingTimeOffset,
    onAddToSchedule,
}) => {
    type Step = 'store' | 'time';

    // Data State
    const [selectedSupportedStores, setSelectedSupportedStores] = useState<
        DeliveryStore[]
    >([]);
    const [selectedUnsupportedStores, setSelectedUnsupportedStores] = useState<
        DeliveryStore[]
    >([]);
    const [saleDateTime, setSaleDateTime] = useState<Date | undefined>(
        product.saleStartDate
    );
    const [timeOffset, setTimeOffset] = useState<string>('01:00');

    // UI State
    const [step, setStep] = useState<Step>('store');

    const handleAddToSchedule = (params: AddToTimedReleaseParams) => {
        setSelectedSupportedStores([]);
        setSelectedUnsupportedStores([]);
        setStep('store');
        onAddToSchedule({
            timed: params.timed,
            unsupportedTimed: params.unsupportedTimed,
        });
    };

    return (
        <div className={cx('TimedReleaseScheduleEditor', className)}>
            {step === 'store' && (
                <TimedReleaseStoreSelector
                    onSelectSupported={setSelectedSupportedStores}
                    onSelectUnsupported={setSelectedUnsupportedStores}
                    onNext={() => setStep('time')}
                    selectedSupported={selectedSupportedStores}
                    selectedUnsupported={selectedUnsupportedStores}
                    deliveryStores={deliveryStores}
                    disabledStores={disabledStores}
                    carvedOutStores={carvedOutStores}
                />
            )}
            {step === 'time' && (
                <TimedReleaseTimeSelector
                    hasTimedReleases={hasTimedReleases}
                    selectedUnsupportedStores={selectedUnsupportedStores}
                    saleDateTime={saleDateTime}
                    existingSaleDateTime={existingSaleDateTime}
                    onSaleDateTimeChange={setSaleDateTime}
                    onPrevious={() => setStep('store')}
                    timeOffset={timeOffset}
                    existingTimeOffset={existingTimeOffset}
                    onTimeOffsetChange={setTimeOffset}
                    selectedSupportedStores={selectedSupportedStores}
                    onAddToSchedule={handleAddToSchedule}
                />
            )}
        </div>
    );
};

export default TimedReleaseScheduleEditor;