import ExternalLink from '@/Components/ExternalLink';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head } from '@inertiajs/react';

interface AuthorizationUrl {
    service: string;
    authorization_url: string;
}

export default function VerifyDeviceConnected({
    authorizationUrls,
}: {
    authorizationUrls: AuthorizationUrl[];
}) {
    const instructions = authorizationUrls.map((url) => {
        switch (url.service) {
            case 'Withings':
                return (
                    <ol className="my-6 ml-6 list-decimal [&>li]:mt-4">
                        <li>
                            <ExternalLink href="https://www.withings.com/it/it/withings-app">
                                Scarica l'app Withings
                            </ExternalLink>
                        </li>
                        <li>Apri l'app Withings e crea il tuo account</li>
                        <li>
                            Accedi all'app Withings e aggiungi i dispositivi che
                            hai ricevuto
                        </li>
                        <li>
                            <ExternalLink href={url.authorization_url}>
                                Autorizzaci ad usare i dati raccolti dai
                                dispositivi
                            </ExternalLink>
                        </li>
                    </ol>
                );
            default:
                throw new Error('Unknown service');
        }
    });

    return (
        <GuestLayout>
            <Head title="Connetti i dispositivi" />

            <div className="mb-12 text-center">
                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight lg:text-5xl">
                    Ci sei quasi!
                </h1>
            </div>

            <div className="mb-4 text-sm text-gray-600">
                Per poter usare i dati raccolti dai dispositivi che ti abbiamo
                assegnato abbiamo bisogno della tua autorizzazione:
                {instructions}
            </div>
        </GuestLayout>
    );
}
