<script lang="ts">
    import {
        CompositeHandleResolver,
        DohJsonHandleResolver,
        WellKnownHandleResolver,
        CompositeDidDocumentResolver,
        PlcDidDocumentResolver,
        WebDidDocumentResolver,
    } from '@atcute/identity-resolver';
    import { isHandle } from '@atcute/lexicons/syntax';
    import { getPdsEndpoint } from '@atcute/identity';


    const handleResolver = new CompositeHandleResolver({
        methods: {
            dns: new DohJsonHandleResolver({ dohUrl: 'https://cloudflare-dns.com/dns-query' }),
            http: new WellKnownHandleResolver(),
        },
    });


    const didResolver = new CompositeDidDocumentResolver({
        methods: {
            plc: new PlcDidDocumentResolver(),
            web: new WebDidDocumentResolver(),
        },
    });

    let handleToLookUp = $state('');
    let error: string | null = $state(null);
    let slowpoke = $state(false);

    let { resolvedResult } = $props();


    const searchForUser = async (event: Event) => {
        event.preventDefault();
        error = null;
        try {
            let handle = handleToLookUp.replace(/^@/, '').toLowerCase();
            if (!isHandle(handle)) {
                error = 'Not a valid handle';
                return;
            }
            let did = await handleResolver.resolve(handle);

            const didDoc = await didResolver.resolve(did);
            const pdsUrl = getPdsEndpoint(didDoc);

            resolvedResult(did, handle,  pdsUrl, slowpoke);
        }catch(e){
            if (e instanceof Error) {
                error = e.message;
            }
        }
    };


</script>

<form onsubmit={searchForUser} class="space-y-4">
    <fieldset class="fieldset w-full">
        <label class="label" for="search">ATProto Handle</label>
        <input
            bind:value={handleToLookUp}
            id="search"
            type="text"
            placeholder="alice.bsky.social"
            class="input input-bordered w-full"
        />
    </fieldset>

    <fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
        <legend class="fieldset-legend">Slow Poke</legend>
        <label class="label">
            <input type="checkbox" bind:checked={slowpoke} class="toggle" />
            uses web calls to walk the repo to show you the speed difference
        </label>
    </fieldset>

    {#if error}
        <div class="alert alert-error">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>Error: {error}</span>
        </div>
    {/if}

    <div class="form-control mt-6">
        <button class="btn btn-primary">
            Walk by {slowpoke ? 'API Calls' : 'Repo Export'}
        </button>
    </div>
</form>
