import React, { useContext } from 'react';
import {
    Button,
    Field,
    Select,
    type SelectOption,
    FullscreenModal,
} from '@theorchard/suite-components';
import { useIdentity } from '@theorchard/suite-frontend';
import { BrandIcon } from '@theorchard/suite-icons';
import { useHistory } from 'react-router-dom';
import AccountSearchDropdown from 'src/components/accountSearchDropdown';
import BulkUploadContext from 'src/components/bulkUploadContext';
import PpAccountSearchDropdown from 'src/components/ppAccountSearchDropdown';
import {
    ROUTE_BULK_CREATE_DIGITAL_AUDIO,
    ROUTE_BULK_CREATE_GETTING_STARTED,
} from 'src/constants';
import { isDontShowCookieChecked } from 'src/pages/gettingStartedPage/useDontShowCookie';
import {
    useCcmSpotifyBulkTemplatePopulation,
    usePpBulkUploadAccountSelector,
} from 'src/utils/features';
import './index.scss';

export const getNextRoute = (
    isCcmSpotifyBulkTemplatePopulationEnabled: boolean,
    isDontShowChecked: boolean
) =>
    isCcmSpotifyBulkTemplatePopulationEnabled && !isDontShowChecked
        ? ROUTE_BULK_CREATE_GETTING_STARTED
        : ROUTE_BULK_CREATE_DIGITAL_AUDIO;

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

    const { resources } = useIdentity();
    const vendorResources =
        resources?.filter(item => item.type === 'Vendor') || [];
    const allVendors =
        vendorResources.filter(item => item.id === '*').length > 0;

    const labelSeparator = ' • ';
    const options: SelectOption[] = vendorResources.map(
        item =>
            ({
                label: `${item.name}${labelSeparator}${item.id}`,
                value: item.id.toString(),
            } as SelectOption)
    );

    const isPpAccountSelectorEnabled = usePpBulkUploadAccountSelector();
    const isCcmSpotifyBulkTemplatePopulationEnabled =
        useCcmSpotifyBulkTemplatePopulation();

    const { vendorId, setVendorId, setVendorName } =
        useContext(BulkUploadContext);

    const handleContinue = () =>
        history.push(
            getNextRoute(
                isCcmSpotifyBulkTemplatePopulationEnabled,
                isDontShowCookieChecked()
            )
        );

    const handleSelection = (option: SelectOption | undefined) => {
        setVendorId(option ? parseInt(option.value) : null);
        setVendorName(option?.label?.split(labelSeparator)[0] ?? null);
    };

    return (
        <div className="account-selection-page">
            <FullscreenModal.Title
                title={$t('bulkDigitalAudio.accountSelectionPage.title')}
            >
                {$t('bulkDigitalAudio.accountSelectionPage.subtitle')}
            </FullscreenModal.Title>
            <div className="account-selection-page-body">
                <Field
                    className="account-selection-page-account"
                    controlId="account-selection-page-account"
                    labelText={$t(
                        'bulkDigitalAudio.accountSelectionPage.account'
                    )}
                >
                    {isPpAccountSelectorEnabled ? (
                        <PpAccountSearchDropdown
                            className="pp-account-selection-page-dropdown"
                            menuWidth="100%"
                            placeholder={$t(
                                'bulkDigitalAudio.accountSelectionPage.dropdownPlaceholder'
                            )}
                            onSelect={handleSelection}
                            options={allVendors ? undefined : options}
                        />
                    ) : allVendors ? (
                        <AccountSearchDropdown
                            className="account-selection-page-dropdown"
                            menuWidth="100%"
                            placeholder={$t(
                                'bulkDigitalAudio.accountSelectionPage.dropdownPlaceholder'
                            )}
                            onSelect={handleSelection}
                        />
                    ) : (
                        <Select
                            className="account-selection-page-dropdown"
                            options={options}
                            menuWidth="100%"
                            placeholder={$t(
                                'bulkDigitalAudio.accountSelectionPage.dropdownPlaceholder'
                            )}
                            onSelect={handleSelection}
                            components={{
                                // Use custom OptionLabel instead of icon key in SelectOption dict
                                // so that the icon does not show when the option is selected
                                OptionLabel: ({ option }) => (
                                    <div>
                                        <BrandIcon brand="orchard" size="16" />
                                        <span
                                            style={{
                                                verticalAlign: 'middle',
                                                marginLeft: '5px',
                                            }}
                                        >
                                            {option?.label}
                                        </span>
                                    </div>
                                ),
                            }}
                        />
                    )}
                </Field>
                <div className="account-selection-page-button">
                    <Button
                        variant="primary"
                        size="lg"
                        onClick={handleContinue}
                        disabled={vendorId === null}
                    >
                        <span className="account-selection-page-button-text">
                            {$t('bulkDigitalAudio.accountSelectionPage.next')}
                        </span>
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default AccountSelectionPage;