import React from 'react';
import { Card } from '@theorchard/suite-components';
import { formatJsxMessage } from '@theorchard/suite-frontend';
import SpotifyPopulatorSidecar from 'src/components/spotifyPopulatorSidecar';
import { BULK_TOOL_GUIDE_URL } from 'src/constants';
import { useCcmSpotifyBulkTemplatePopulation } from 'src/utils/features';

const Step1Upload = ({
    templateDownloadLink,
    classicalTemplateDownloadLink,
}: {
    templateDownloadLink: string | null;
    classicalTemplateDownloadLink: string | null;
}) => {
    const [isSidecarOpen, setIsSidecarOpen] = React.useState(false);
    const isCcmSpotifyBulkTemplatePopulationEnabled =
        useCcmSpotifyBulkTemplatePopulation();

    return (
        <div className="bulk-upload-sidebar-step-body">
            <Card.Text>
                {$t('bulkDigitalAudio.step1Upload.useLatestTemplate')}
                <ul>
                    <li>
                        {templateDownloadLink ? (
                            <a
                                href={templateDownloadLink}
                                className="nonclassical-template-link"
                            >
                                {$t(
                                    'bulkDigitalAudio.step1Upload.nonclassical'
                                )}
                            </a>
                        ) : (
                            <span>
                                {$t(
                                    'bulkDigitalAudio.step1Upload.nonclassical'
                                )}
                            </span>
                        )}
                    </li>
                    <li>
                        {classicalTemplateDownloadLink ? (
                            <a
                                href={classicalTemplateDownloadLink}
                                className="classical-template-link"
                            >
                                {$t('bulkDigitalAudio.step1Upload.classical')}
                            </a>
                        ) : (
                            <span>
                                {$t('bulkDigitalAudio.step1Upload.classical')}
                            </span>
                        )}
                    </li>
                </ul>
            </Card.Text>
            {isCcmSpotifyBulkTemplatePopulationEnabled && (
                <Card.Text>
                    {formatJsxMessage(
                        'bulkDigitalAudio.step1Upload.spotifyPrePop',
                        {
                            link: ({ children }) => (
                                <a onClick={() => setIsSidecarOpen(true)}>
                                    {children}
                                </a>
                            ),
                        }
                    )}
                </Card.Text>
            )}
            <Card.Text>
                {formatJsxMessage('bulkDigitalAudio.step1Upload.bulkGuide', {
                    guideLink: ({ children }) => (
                        <a
                            href={BULK_TOOL_GUIDE_URL}
                            target="_blank"
                            rel="noreferrer"
                        >
                            {children}
                        </a>
                    ),
                })}
            </Card.Text>
            {isSidecarOpen && (
                <SpotifyPopulatorSidecar
                    isOpen
                    onClose={() => setIsSidecarOpen(false)}
                />
            )}
        </div>
    );
};

export default Step1Upload;