<script>
    import { page } from "$app/stores";
    import { goto } from "$app/navigation";
    import EmptyState from "$components/EmptyState.svelte";

    export let result = null;
</script>

<div class="card mt-5">
    <div class="card-header">
        <h5 class="card-title">Hasil Diagnosa</h5>
    </div>
    <div class="card-body">
        {#if result}
            <div class="list-group">
                <div class="list-group-item list-group-item-action active" aria-current="true">
                    <h3 class="">{result?.disease?.name}</h3>
                    <p class="mb-0">{result?.disease?.description}</p>
                </div>
                <div class="list-group-item list-group-item-action" aria-current="true">
                    <h5 class="mb-1">Rekomendasi Penanganan</h5>
                    <h3 class="mb-0 mt-3">{result?.disease?.treatment}</h3>
                </div>
                <div href={"#"} class="list-group-item list-group-item-action" aria-current="true">
                    <h5 class="mb-1">Alur Diagnosa</h5>
                    <ul class="steps steps-vertical border-0 m-0 mt-3 p-0">
                        {#each result?.symptoms as symptom}
                            <li class="step-item">
                                <div class="h4 m-0">{symptom?.name || ""}</div>
                                <div class="text-secondary">{symptom?.description || ""}</div>
                                {#if result.follow_up_questions?.length > 0 && result.follow_up_questions?.filter((item) => item.symptom_id === symptom.id)?.length > 0}
                                    <ul class="steps steps-yellow steps-vertical border-0 m-0 mt-3 p-0 text-yellow">
                                        {#each result.follow_up_questions?.filter((item) => item.symptom_id === symptom.id) as quest}
                                            <li class="step-item">
                                                <div class="text-yellow">{`${quest?.question}:`}</div>
                                                <div class="strong m-0">{quest?.option || ""}</div>
                                            </li>
                                        {/each}
                                    </ul>
                                {/if}
                            </li>
                        {/each}
                    </ul>
                </div>
            </div>
        {:else}
            <EmptyState height="150px" />
        {/if}
    </div>
    <div class="card-footer d-flex justify-content-center">
        <button
            type="button"
            class="btn btn-primary"
            on:click={() => {
                goto(`/staff/patients/${$page.params.id}`);
            }}>Selesai</button
        >
    </div>
</div>
