import React from 'react';
import { Button, Select } from '@theorchard/suite-components';
import { formatJsxMessage, formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { ASSET_UPLOADING_STATUS } from '../../../../../modules/bulkDigitalAudio/src/constants';
import type { INGESTION_STATUS } from '../../../../../modules/bulkDigitalAudio/src/constants';
import type { ListViewItem } from 'src/pages/createPage/types';

const BulkHeader = ({
    assetUploadingStatus,
    ingestionStatus,
    isSaveAndExitEnabled,
    useBulkCreateModal,
    setSkipIncompleteAssets,
    setIsBulkCreateModalOpen,
    handleExit,
    completeProductCount,
    totalProductCount,
}: {
    assetUploadingStatus: ASSET_UPLOADING_STATUS;
    ingestionStatus: INGESTION_STATUS | null;
    isSaveAndExitEnabled: boolean;
    useBulkCreateModal: boolean;
    setSkipIncompleteAssets: (val: boolean) => void;
    setIsBulkCreateModalOpen: (val: boolean) => void;
    handleExit: () => void;
    completeProductCount: number;
    totalProductCount: number;
}) => {
    const handleBulkCreateDropdownChange = (item?: ListViewItem) => {
        if (!item) return;
        const { value } = item;
        setSkipIncompleteAssets(value === 'createProductsWithValidAssetsOnly');
        setIsBulkCreateModalOpen(true);
    };

    const dropdownOptions = [
        {
            value: 'createProductsWithBothFailedAndValidAssets',
            label: 'bulkCreateModal.allProductsOption',
            subtitle: 'bulkCreateModal.allProductsInfo',
        },
        {
            value: 'createProductsWithValidAssetsOnly',
            label: 'bulkCreateModal.completeOnlyOption',
            subtitle: 'bulkCreateModal.completeOnlyInfo',
            disabled: completeProductCount === 0,
        },
    ];

    return (
        <>
            <Button
                variant="secondary"
                size="lg"
                disabled={!isSaveAndExitEnabled}
                onClick={() => handleExit()}
                className="save-and-exit-button"
            >
                <span className="button-text">
                    {$t('createPage.saveAndExit')}
                </span>
            </Button>
            {assetUploadingStatus === ASSET_UPLOADING_STATUS.COMPLETE ||
            assetUploadingStatus === ASSET_UPLOADING_STATUS.SKIPPED ||
            (completeProductCount > 0 &&
                completeProductCount === totalProductCount) ||
            !useBulkCreateModal ? (
                <Button
                    variant="primary"
                    size="lg"
                    disabled={!useBulkCreateModal || ingestionStatus !== null}
                    onClick={() => setIsBulkCreateModalOpen(true)}
                    className="create-button"
                >
                    <span>{$t('createPage.create')}</span>
                </Button>
            ) : (
                <Select
                    menuWidth={350}
                    options={dropdownOptions}
                    onChange={handleBulkCreateDropdownChange}
                    hideFilter={true}
                    components={{
                        SelectInput: () => (
                            <Button
                                variant="primary"
                                size="lg"
                                disabled={
                                    !useBulkCreateModal ||
                                    ingestionStatus !== null
                                }
                                className="create-button"
                            >
                                {$t('createPage.create')}
                                <GlyphIcon name="chevronDown" size={12} />
                            </Button>
                        ),
                        OptionLabel: ({ option }) => (
                            <div>
                                <span className="creation-dropdown-option-content">
                                    {option.label &&
                                        formatJsxMessage(option.label, {
                                            bold: ({ children }) => (
                                                <b className="bold">
                                                    {children}
                                                </b>
                                            ),
                                        })}
                                </span>
                            </div>
                        ),
                        OptionSubtitle: ({ option }) => (
                            <div>
                                <span className="creation-dropdown-option-subtitle">
                                    {option.subtitle &&
                                        formatMessage(option.subtitle)}
                                </span>
                            </div>
                        ),
                    }}
                />
            )}
        </>
    );
};

export default BulkHeader;