import React, { useState } from 'react';
import { Button } from '@theorchard/suite-components';
import { useHistory } from 'react-router-dom';
import DropdownMenu from 'src/components/dropdownMenu';
import {
    ROUTE_CREATE_BUNDLE_AUDIO_VIDEO,
    ROUTE_CREATE_BUNDLE_VIDEO_ONLY,
    SELECT_BUNDLE_DROPDOWN_NAME,
    getSelectBundleDropdownOptions,
} from 'src/constants';
import { BundleType } from 'src/data/globalTypes';

const SelectPage = () => {
    const history = useHistory();

    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);
        }
    };

    const handleNext = () => {
        if (selectedBundleType === BundleType.AUDIO_VIDEO) {
            history.push(ROUTE_CREATE_BUNDLE_AUDIO_VIDEO);
        } else {
            history.push(ROUTE_CREATE_BUNDLE_VIDEO_ONLY);
        }
    };

    const handleCancel = () => {
        history.push('/');
    };

    return (
        <div className="select-bundle-type">
            <div className="select-bundle-type-title">
                {$t('bundles.selectPage.selectBundleTypeTitle')}
            </div>
            <div className="select-bundle-type-subtitle">
                {$t('bundles.selectPage.selectBundleTypeSubtitle')}
            </div>
            <DropdownMenu
                menuOptions={getSelectBundleDropdownOptions()}
                handleSelect={handleSelectBundleType}
                name={SELECT_BUNDLE_DROPDOWN_NAME}
                title=""
                placeholder={$t(
                    'bundles.selectPage.selectBundleDropdownPlaceholder'
                )}
                isSelectable
            />
            <div className="select-bundle-type-button-container">
                <Button variant="tertiary" onClick={handleCancel} size="lg">
                    {$t('bundles.selectPage.cancelButtonLabel')}
                </Button>
                <Button
                    variant="primary"
                    disabled={isNextButtonDisabled}
                    onClick={handleNext}
                    size="lg"
                >
                    {$t('bundles.selectPage.nextButtonLabel')}
                </Button>
            </div>
        </div>
    );
};

export default SelectPage;