import { Alert, DatePicker, Dropdown } from '@theorchard/suite-components';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import { useIsRemoveImmediatePreorderOptionEnabled } from 'shared/features';
import type { DropdownOption } from '@theorchard/suite-components';
import type { FC } from 'react';
import type { PreorderType } from 'src/types';

export interface PreorderTypeOption extends DropdownOption {
    value: PreorderType;
}

const options = (type: PreorderType | undefined) => {
    let optionList: PreorderTypeOption[] = [
        {
            label: $t(`releaseScheduler.preorderDropdown.immediate`),
            value: 'immediate',
        },
        {
            label: $t(`releaseScheduler.preorderDropdown.no-preorder`),
            value: 'no-preorder',
        },
        {
            label: $t(`releaseScheduler.preorderDropdown.specific-date`),
            value: 'specific-date',
        },
    ];

    if (useIsRemoveImmediatePreorderOptionEnabled() && type !== 'immediate')
        optionList = [
            {
                label: $t(`releaseScheduler.preorderDropdown.no-preorder`),
                value: 'no-preorder',
            },
            {
                label: $t(`releaseScheduler.preorderDropdown.specific-date`),
                value: 'specific-date',
            },
        ];

    return optionList;
};

export interface PreorderDropdownProps {
    value?: Date | null;
    type?: PreorderType;
    approvalDate?: Date | null;
    editable: boolean;
    warning?: string;
    error?: string;
    onChange: (value?: Date | null) => void;
    setType: (value: PreorderType) => void;
}

const PreorderDropdown: FC<PreorderDropdownProps> = ({
    value,
    type,
    approvalDate,
    editable,
    warning,
    error,
    onChange,
    setType,
}) => {
    const [preorderTypeWarningMessage, setPreorderTypeWarningMessage] =
        useState<string>();

    const displayValue =
        type === 'immediate'
            ? $t(`releaseScheduler.preorderDropdown.immediate`)
            : type === 'no-preorder'
              ? $t(`releaseScheduler.preorderDropdown.no-preorder`)
              : dayjs(value).format('YYYY-MM-DD');

    useEffect(() => {
        if (dayjs(value).isSame(dayjs('1900-01-01'))) setType('immediate');
        else if (!value) setType('no-preorder');
        else setType('specific-date');
    }, []);

    const handlePreorderTypeChange = (option: PreorderTypeOption) => {
        if (
            option &&
            option.value === 'no-preorder' &&
            type === 'specific-date'
        ) {
            setPreorderTypeWarningMessage(
                $t(
                    `releaseScheduler.preorderDropdown.noPreorderInstantGratsConfirmationMessage`
                )
            );
        } else {
            setPreorderTypeWarningMessage(undefined);
        }

        if (option && option.value === 'immediate')
            if (approvalDate) onChange(dayjs(approvalDate).toDate());
            else onChange(dayjs('1900-01-01').toDate());
        if (option && option.value === 'no-preorder') onChange(null);
        if (option && option.value === 'specific-date') onChange(null);
        setType(option.value);
    };

    return (
        <div className="date-row">
            <div className="field-name">
                {$t(`releaseScheduler.productDetails.preorderType`)}:
            </div>
            <div className="detail row-input">
                {editable ? (
                    <>
                        <Dropdown
                            testId="preorderTypeDropdown"
                            value={options(type).find(
                                ({ value: v }) => v === type
                            )}
                            isSearchable={false}
                            options={options(type)}
                            onChange={option =>
                                option && handlePreorderTypeChange(option)
                            }
                        />
                        {preorderTypeWarningMessage && (
                            <Alert
                                testId="preorderType-change-warning"
                                className="ProductDetails-warning"
                                variant="warn"
                                text={preorderTypeWarningMessage}
                            />
                        )}
                        {type === 'specific-date' && (
                            <>
                                <DatePicker
                                    testId="preorderType"
                                    isClearable={false}
                                    selectedValue={
                                        value
                                            ? dayjs(value).format('YYYY-MM-DD')
                                            : ''
                                    }
                                    onChange={preorderDate => {
                                        preorderDate
                                            ? onChange(
                                                  dayjs(preorderDate).toDate()
                                              )
                                            : onChange(null);
                                    }}
                                />
                                {warning && (
                                    <Alert
                                        testId="preorderType-warning"
                                        className="ProductDetails-warning"
                                        variant="warn"
                                        text={warning}
                                    />
                                )}
                                {error && (
                                    <Alert
                                        testId="preorderType-error"
                                        className="ProductDetails-error"
                                        variant="error"
                                        text={error}
                                    />
                                )}
                            </>
                        )}
                    </>
                ) : (
                    displayValue
                )}
            </div>
        </div>
    );
};

export default PreorderDropdown;