import { Button } from '@theorchard/suite-components';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import OAPanel from 'shared/components/oaPanel';
import StaggeredReleaseScheduleModal from '../staggeredReleaseScheduleModal/staggered-release-schedule-modal';
import TimedReleaseScheduleModal from '../timedReleaseScheduleModal/timed-release-schedule-modal';
import ProductDetails from './productDetails';
import type { FC } from 'react';
import type {
    DeliveryStore,
    PreorderType,
    Product,
    ProductReleaseSchedule,
    ReleaseType,
} from 'src/types';

export interface ReleaseScheduleOAPanelProps {
    product?: Product;
    deliveryStores: DeliveryStore[];
    carvedOutStores: DeliveryStore[];
    editable: boolean;
    debug?: boolean;
    loading: boolean;
    error: boolean;
    onEdit: () => void;
    onSaveReleaseSchedule: (
        releaseSchedule: Partial<ProductReleaseSchedule>
    ) => void;
    onUpdateProduct: (product: Product) => void;
}

export const ReleaseScheduleOAPanel: FC<ReleaseScheduleOAPanelProps> = ({
    product,
    deliveryStores,
    carvedOutStores,
    editable,
    debug = false,
    loading,
    error,
    onEdit,
    onSaveReleaseSchedule,
    onUpdateProduct,
}) => {
    const [isTimedReleaseModalOpen, setTimedReleaseModalOpen] =
        useState<boolean>(false);
    const [isStaggeredReleaseModalOpen, setStaggeredReleaseModalOpen] =
        useState<boolean>(false);

    const [_product, setProduct] = useState<Product | undefined>(product);
    const [preorderType, setPreorderType] = useState<
        PreorderType | undefined
    >();

    useEffect(() => {
        product &&
            setProduct({
                ...product,
                saleStartDate:
                    _product?.saleStartDate || product?.saleStartDate,
                releaseDate: _product?.releaseDate || product?.releaseDate,
                preorderDate: _product?.preorderDate || product?.preorderDate,
            });
    }, [product]);

    const handleModalOpen = (releaseType: ReleaseType) => {
        (releaseType === 'timed'
            ? setTimedReleaseModalOpen
            : setStaggeredReleaseModalOpen)(true);
    };

    const errors = {
        preorderDate: !_product
            ? false
            : !!(
                  (_product.preorderDate &&
                      _product.saleStartDate &&
                      dayjs(_product.saleStartDate).isBefore(
                          _product.preorderDate
                      )) ||
                  (preorderType === 'specific-date' && !_product.preorderDate)
              ),
    };

    return (
        <OAPanel
            title={$t('releaseScheduler.releaseScheduleOaPanel.header')}
            editable={editable}
            debug={debug}
            loading={loading}
            error={error}
            onEdit={onEdit}
            footer={
                editable && (
                    <Button
                        disabled={
                            !!Object.values(errors).find(
                                error => error === true
                            )
                        }
                        data-testid="submit"
                        variant="primary"
                        onClick={() => _product && onUpdateProduct(_product)}
                    >
                        {$t('releaseScheduler.releaseScheduleOaPanel.submit')}
                    </Button>
                )
            }
        >
            {product && _product && (
                <>
                    <ProductDetails
                        editable={editable}
                        product={_product}
                        preorderType={preorderType}
                        errors={errors}
                        onModalOpen={(releaseType: ReleaseType) => {
                            handleModalOpen(releaseType);
                        }}
                        onProductChange={setProduct}
                        setPreorderType={setPreorderType}
                    />
                    <TimedReleaseScheduleModal
                        isOpen={isTimedReleaseModalOpen}
                        setIsOpen={setTimedReleaseModalOpen}
                        deliveryStores={deliveryStores}
                        carvedOutStores={carvedOutStores}
                        product={_product}
                        onSave={({ timed, unsupportedTimed }) => {
                            onSaveReleaseSchedule({
                                timed,
                                unsupportedTimed,
                            });
                        }}
                    />
                    <StaggeredReleaseScheduleModal
                        deliveryStores={deliveryStores}
                        carvedOutStores={carvedOutStores}
                        isOpen={isStaggeredReleaseModalOpen}
                        setIsOpen={setStaggeredReleaseModalOpen}
                        product={_product}
                        onSave={staggered => {
                            onSaveReleaseSchedule({
                                staggered,
                            });
                        }}
                    />
                </>
            )}
        </OAPanel>
    );
};

export default ReleaseScheduleOAPanel;