<script lang="ts">
    import DialogHeader from "@lib/UI/components/DialogHeader.svelte";
    import Decision from "@lib/UI/components/Decision.svelte";
    import Question from "@lib/UI/components/Question.svelte";
    import Option from "@lib/UI/components/Option.svelte";
    import Options from "@lib/UI/components/Options.svelte";
    import Instruction from "@lib/UI/components/Instruction.svelte";
    import UserDecisions from "@lib/UI/components/UserDecisions.svelte";
    import {
        TYPE_COUCHDB,
        TYPE_BUCKET,
        TYPE_P2P,
        TYPE_WEBDAV,
        TYPE_CANCELLED,
        type SetupRemoteResultType,
    } from "./setupDialogTypes";

    type Props = {
        setResult: (result: SetupRemoteResultType) => void;
    };
    const { setResult }: Props = $props();
    let userType = $state<SetupRemoteResultType>(TYPE_CANCELLED);
    let proceedTitle = $derived.by(() => {
        if (userType === TYPE_COUCHDB) {
            return "Continue to CouchDB setup";
        } else if (userType === TYPE_BUCKET) {
            return "Continue to S3/MinIO/R2 setup";
        } else if (userType === TYPE_P2P) {
            return "Continue to Peer-to-Peer only setup";
        } else if (userType === TYPE_WEBDAV) {
            return "Continue to WebDAV setup";
        } else {
            return "Please select an option to proceed";
        }
    });
    const canProceed = $derived.by(() => {
        return (
            userType === TYPE_COUCHDB ||
            userType === TYPE_BUCKET ||
            userType === TYPE_P2P ||
            userType === TYPE_WEBDAV
        );
    });
</script>

<DialogHeader title="Enter Server Information" />
<Instruction>
    <Question>Please select the type of server to which you are connecting.</Question>
    <Options>
        <Option selectedValue={TYPE_COUCHDB} title="CouchDB" bind:value={userType}>
            This is the most suitable synchronisation method for the design. All functions are available. You must have
            set up a CouchDB instance.
        </Option>
        <Option selectedValue={TYPE_BUCKET} title="S3/MinIO/R2 Object Storage" bind:value={userType}>
            Synchronisation utilising journal files. You must have set up an S3/MinIO/R2 compatible object storage.
        </Option>
        <Option selectedValue={TYPE_WEBDAV} title="WebDAV (Experimental)" bind:value={userType}>
            Experimental synchronisation utilising journal files stored in a WebDAV collection. This is a proof of
            concept for pluggable Journal storage backends.
        </Option>
        <Option selectedValue={TYPE_P2P} title="Peer-to-Peer only" bind:value={userType}>
            This feature enables direct synchronisation between devices. No server is required, but both devices must be
            online at the same time for synchronisation to occur, and some features may be limited. Internet connection
            is only required to signalling (detecting peers) and not for data transfer.
        </Option>
    </Options>
</Instruction>
<UserDecisions>
    <Decision title={proceedTitle} important={canProceed} disabled={!canProceed} commit={() => setResult(userType)} />
    <Decision title="No, please take me back" commit={() => setResult(TYPE_CANCELLED)} />
</UserDecisions>
