import type { FC } from 'react';
import React, { useState } from 'react';
import { Field, Modal, Radio, useToast } from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import { useHistory } from 'react-router-dom';
import {
    BULK_FEEDBACK_FORM_LINK,
    BULK_MODAL_BUTTON_GROUP,
    ROUTE_CATALOG_PERFORMANCE,
} from 'src/constants';
import { ASSET_UPLOADING_STATUS } from '../../../../../modules/bulkDigitalAudio/src/constants';
import './bulkCreateModal.scss';

const BulkCreateModal: FC<{
    isOpen: boolean;
    onClose: () => void;
    assetUploadingStatus: ASSET_UPLOADING_STATUS;
    assetsRequired: boolean;
    forceBackRoute: string | undefined;
    bulkSessionId: string | null;
    completeProductCount: number;
    totalProductCount: number;
    onBulkCreate:
        | ((id: string, assetsRequired: boolean, submit: boolean) => void)
        | null;
}> = ({
    isOpen,
    onClose,
    assetUploadingStatus,
    assetsRequired,
    forceBackRoute,
    bulkSessionId,
    completeProductCount,
    totalProductCount,
    onBulkCreate,
}) => {
    const allProductsComplete =
        completeProductCount > 0 && completeProductCount === totalProductCount;
    const isMixedAssets =
        assetUploadingStatus === ASSET_UPLOADING_STATUS.INCOMPLETE &&
        !allProductsComplete;
    const isMetadataOnly =
        assetUploadingStatus === ASSET_UPLOADING_STATUS.SKIPPED;
    const [isCreateButtonDisabled, setIsCreateButtonDisabled] = useState(true);
    const [submit, setSubmit] = useState(false);

    const history = useHistory();
    const toast = useToast();

    const handleSelectOption = (val: boolean) => {
        setSubmit(val);
        setIsCreateButtonDisabled(false);
    };

    const handleBulkCreate = (
        skipIncompleteAssets: boolean,
        submit: boolean
    ) => {
        if (onBulkCreate && bulkSessionId) {
            toast(
                <div>
                    {$t('createPage.bulkCreateToastLine1', {
                        numProducts: skipIncompleteAssets
                            ? completeProductCount
                            : totalProductCount,
                    })}
                    <br />
                    <br />
                    {$t('createPage.bulkCreateToastLine2')}
                </div>,
                { persistent: true }
            );
            const feedbackMessage = $t('createPage.bulkFeedbackToast');
            const feedbackLinkText = $t('createPage.bulkFeedbackLink');
            setTimeout(() => {
                toast(
                    <div>
                        {feedbackMessage}
                        <br />
                        <a href={BULK_FEEDBACK_FORM_LINK}>{feedbackLinkText}</a>
                    </div>,
                    { variant: 'info', persistent: true }
                );
            }, 5000);
            onBulkCreate(bulkSessionId, skipIncompleteAssets, submit);
            if (forceBackRoute) {
                history.push(forceBackRoute);
                return;
            }
        }
        history.push(ROUTE_CATALOG_PERFORMANCE);
    };

    return (
        <Modal
            isOpen={isOpen}
            onRequestClose={onClose}
            title={$t(
                isMixedAssets
                    ? 'bulkCreateModal.titleMixed'
                    : 'bulkCreateModal.titleComplete'
            )}
            confirmTitle={$t('createPage.confirm')}
            onConfirm={() => {
                handleBulkCreate(assetsRequired, submit);
            }}
            className={`bulk-create-modal${isMixedAssets ? ' long' : ''}`}
            confirmDisabled={
                isMetadataOnly || allProductsComplete
                    ? false
                    : isCreateButtonDisabled
            }
        >
            {!isMetadataOnly && (
                <p className="warning-line">
                    {$t('bulkCreateModal.warningLine')}
                </p>
            )}

            {isMetadataOnly ? (
                <div className="metadata-only-confirmation">
                    <p>{$t('bulkCreateModal.skippedAssetsConfirmLine1')}</p>
                    <p>{$t('bulkCreateModal.skippedAssetsConfirmLine2')}</p>
                </div>
            ) : (
                <Field
                    controlId="bulk-create-options"
                    labelText={$t('bulkCreateModal.chooseOptionLabel')}
                >
                    <Radio
                        name={BULK_MODAL_BUTTON_GROUP}
                        id="bulk-create-submit-products"
                        value="submit-products"
                        label={formatJsxMessage(
                            'bulkCreateModal.chooseModalSubmitProducts',
                            {
                                bold: ({ children }) => (
                                    <span className="bold">{children}</span>
                                ),
                            }
                        )}
                        onClick={() => handleSelectOption(true)}
                    />
                    <Radio
                        name={BULK_MODAL_BUTTON_GROUP}
                        id="bulk-create-dont-submit-products"
                        value="dont-submit-products"
                        label={formatJsxMessage(
                            'bulkCreateModal.chooseModalNotSubmitProducts',
                            {
                                bold: ({ children }) => (
                                    <span className="bold">{children}</span>
                                ),
                            }
                        )}
                        onClick={() => handleSelectOption(false)}
                    />
                </Field>
            )}

            {isMixedAssets && (
                <p className="note-line">
                    {$t('bulkCreateModal.chooseModalNote')}
                </p>
            )}
        </Modal>
    );
};

export default BulkCreateModal;