import React, { useContext, useEffect } from 'react';
import { useState } from 'react';
import {
    Alert,
    Button,
    Card,
    Checkbox,
    Form,
    FullscreenModal,
} from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import { useHistory, type RouteComponentProps } from 'react-router-dom';
import BulkUploadContext from 'src/components/bulkUploadContext';
import SpotifyPopulatorSidecar from 'src/components/spotifyPopulatorSidecar';
import {
    BULK_TOOL_GUIDE_URL,
    ROUTE_BULK_ACCOUNT_SELECTION,
    ROUTE_BULK_CREATE_DIGITAL_AUDIO,
} from 'src/constants';
import useBulkTemplateDownload from 'src/hooks/useBulkTemplateDownload';
import TemplateDownloadButton from 'src/pages/gettingStartedPage/templateDownloadButton';
import useDontShowCookie from 'src/pages/gettingStartedPage/useDontShowCookie';
import './index.scss';

interface GettingStartedPageProps extends Partial<RouteComponentProps> {
    onNext?: () => void;
}

const GettingStartedPage = ({ onNext }: GettingStartedPageProps = {}) => {
    const history = useHistory();

    const [isSidecarOpen, setIsSidecarOpen] = useState(false);
    const { isChecked, onChange } = useDontShowCookie();
    const [isCookieChecked, setCookieChecked] = useState(isChecked);

    const { vendorId, subaccountId } = useContext(BulkUploadContext);

    const {
        templateDownloadLink,
        classicalTemplateDownloadLink,
        isTemplateLoading,
        isClassicalTemplateLoading,
    } = useBulkTemplateDownload();

    useEffect(() => {
        if (onNext) return;
        if (!vendorId && !subaccountId) {
            history.push(ROUTE_BULK_ACCOUNT_SELECTION);
        }
    }, [vendorId, subaccountId, onNext]);

    return (
        <div className="getting-started-page">
            <FullscreenModal.Title
                title={$t('bulkDigitalAudio.gettingStartedPage.pageTitle')}
            />
            <Card suite>
                <Card.Header>
                    <Card.Title>
                        {$t(
                            'bulkDigitalAudio.gettingStartedPage.templateDownloadTitle'
                        )}
                    </Card.Title>
                    <Card.Subtitle>
                        {formatJsxMessage(
                            'bulkDigitalAudio.gettingStartedPage.templateDownloadSubtitle',
                            {
                                link: ({ children }) => (
                                    <a
                                        href={BULK_TOOL_GUIDE_URL}
                                        target="_blank"
                                        rel="noreferrer"
                                    >
                                        {children}
                                    </a>
                                ),
                            }
                        )}
                    </Card.Subtitle>
                </Card.Header>
                <Card.Body>
                    <div className="template-download-buttons">
                        <TemplateDownloadButton
                            title={$t(
                                'bulkDigitalAudio.gettingStartedPage.nonclassicalTemplate'
                            )}
                            link={templateDownloadLink}
                            isLoading={isTemplateLoading}
                        />
                        <TemplateDownloadButton
                            title={$t(
                                'bulkDigitalAudio.gettingStartedPage.classicalTemplate'
                            )}
                            link={classicalTemplateDownloadLink}
                            isLoading={isClassicalTemplateLoading}
                        />
                    </div>
                    <Alert
                        variant="information"
                        text={$t(
                            'bulkDigitalAudio.gettingStartedPage.spotifyInfoBanner'
                        )}
                        button={{
                            text: $t(
                                'bulkDigitalAudio.gettingStartedPage.clickHere'
                            ),
                            onClick: () => setIsSidecarOpen(true),
                        }}
                    />
                </Card.Body>
            </Card>
            <div className="navigation-buttons">
                <Form validated>
                    <Checkbox
                        checked={isCookieChecked}
                        onChange={({ target: { checked } }) =>
                            setCookieChecked(checked)
                        }
                        id="dont-show-checkbox"
                        label={$t(
                            'bulkDigitalAudio.gettingStartedPage.dontShowCheckbox'
                        )}
                    />
                </Form>
                <Button
                    size="lg"
                    variant="primary"
                    onClick={() => {
                        onChange(isCookieChecked);
                        if (onNext) {
                            onNext();
                        } else {
                            history.push(ROUTE_BULK_CREATE_DIGITAL_AUDIO);
                        }
                    }}
                >
                    {$t('bulkDigitalAudio.gettingStartedPage.next')}
                </Button>
            </div>
            <SpotifyPopulatorSidecar
                isOpen={isSidecarOpen}
                onClose={() => setIsSidecarOpen(false)}
            />
        </div>
    );
};

export default GettingStartedPage;