import React, { useState } from 'react';
import { Alert, Button } from '@theorchard/suite-components';
import DropdownMenu from 'src/components/dropdownMenu';
import {
    BUNDLED_PRODUCT_OA_LINK,
    SELECT_BUNDLE_DROPDOWN_NAME,
    getSelectBundleDropdownOptions,
} from 'src/constants';
import { BundleType } from 'src/data/globalTypes';

interface SuccessPageProps {
    productId: string;
    handleCreateAnotherBundle: (bundleType: BundleType | undefined) => void;
}

const SuccessPage = (props: SuccessPageProps) => {
    const { productId, handleCreateAnotherBundle } = props;

    const [selectedBundleType, setSelectedBundleType] = useState<BundleType>();
    const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);

    const handleSelectBundleType = (_: string, value: string | undefined) => {
        if (value) {
            setSelectedBundleType(BundleType[value as keyof typeof BundleType]);
            setIsNextButtonDisabled(false);
        }
    };

    return (
        <div className="create-bundle-success-page">
            <div className="create-bundle-title">
                {$t('bundles.createPage.createBundleSuccessMsg')}
            </div>
            <Alert
                className="create-bundle-success-alert"
                variant="success"
                text={
                    <>
                        <span>
                            {$t('bundles.createPage.createBundleSuccessAlert')}
                        </span>
                        <a href={BUNDLED_PRODUCT_OA_LINK + productId}>
                            {$t(
                                'bundles.createPage.createBundleSuccessAlertLink'
                            ) + productId}
                        </a>
                    </>
                }
            />
            <div className="subtitle">
                {$t('bundles.createPage.createBundleSuccessSubtitle')}
            </div>
            <DropdownMenu
                menuOptions={getSelectBundleDropdownOptions()}
                handleSelect={handleSelectBundleType}
                name={SELECT_BUNDLE_DROPDOWN_NAME}
                title={$t('bundles.selectPage.selectBundleDropdownTitle')}
                placeholder={$t(
                    'bundles.selectPage.selectBundleDropdownPlaceholder'
                )}
                isSelectable
            />
            <div className="button-container">
                <Button
                    variant="primary"
                    disabled={isNextButtonDisabled}
                    onClick={() =>
                        handleCreateAnotherBundle(selectedBundleType)
                    }
                    size="lg"
                >
                    {$t('bundles.selectPage.nextButtonLabel')}
                </Button>
            </div>
        </div>
    );
};

export default SuccessPage;