<script lang="ts">
    import { mdiLandRowsHorizontal, mdiTableLarge } from "@mdi/js"
    import { getTibiRestOrders } from "../../../functions/CommerceAPIs/tibiEndpoints/orders"
    import Icon from "../../widgets/Icon.svelte"
    import OrderTable from "./order/list/OrderTableRow.svelte"
    import OrderCard from "./order/list/OrderCard.svelte"
    import OrderDetailedView from "./order/OrderDetailedView.svelte"
    import { location, newNotification } from "../../../store"
    import { spaNavigate } from "../../../actions"
    import Loader from "../Loader.svelte"
    let viewType: "card" | "table" = "table"
    let id = ""
    if ($location && !$location.path.endsWith("/orders") && !$location.path.endsWith("/orders/")) {
        if ($location.path.includes("return")) {
            id = $location.path.split("/return")[0].split("/").filter(Boolean).pop()
        } else if ($location.path.includes("rate")) {
            id = $location.path.split("/rate")[0].split("/").filter(Boolean).pop()
        } else id = $location.path.split("/").filter(Boolean).pop()
    }
    const minTableWidth = 1000
    let innerWidth = typeof "window" !== "undefined" ? window.innerWidth : 360
    $: if (innerWidth < minTableWidth) viewType = "card"
</script>

<svelte:window bind:innerWidth="{innerWidth}" />

{#if id}
    <OrderDetailedView orderId="{id}" />
{:else}
    <section class="wrapper order-table">
        <div class="inner-wrapper">
            <div class="headline">
                <div>
                    <h2>Deine Bestellungen</h2>
                    <p>Hier findest du alle Bestellungen, die du bei uns getätigt hast.</p>
                </div>
                {#if innerWidth >= minTableWidth}
                    <ul>
                        <li>
                            <button
                                on:click="{() => (viewType = 'table')}"
                                class:active="{viewType == 'table'}"
                                aria-label="Tabellenansicht"
                            >
                                <Icon
                                    path="{mdiLandRowsHorizontal}"
                                    size="1.2rem"
                                />
                            </button>
                        </li>

                        <li>
                            <button
                                aria-label="Kartenansicht"
                                on:click="{() => (viewType = 'card')}"
                                class:active="{viewType == 'card'}"
                            >
                                <Icon
                                    path="{mdiTableLarge}"
                                    size="1.2rem"
                                />
                            </button>
                        </li>
                    </ul>
                {/if}
            </div>
            {#await getTibiRestOrders()}
                <Loader
                    size="4"
                    type="bar"
                />
            {:then orders}
                <ul class="{viewType}">
                    {#each orders as order}
                        {#if viewType === "card"}
                            <OrderCard
                                order="{order}"
                                on:click="{() => {
                                    if (order.status_id == 0) {
                                        newNotification({
                                            html: 'Deine Bestellung wurde nicht abgeschlossen. Bitte schließe die Bestellung ab, um sie hier zu öffnen. Sollte etwas abgebucht worden sein, kontaktieren Sie bitte unseren Support.',
                                            class: 'error',
                                        })
                                    } else spaNavigate('/profile/orders/' + order.tibiId)
                                }}"
                            />
                        {:else}
                            <OrderTable
                                order="{order}"
                                on:click="{() => {
                                    if (order.status_id == 0) {
                                        newNotification({
                                            html: 'Deine Bestellung wurde nicht abgeschlossen. Bitte schließe die Bestellung ab, um sie hier zu öffnen. Sollte etwas abgebucht worden sein, kontaktieren Sie bitte unseren Support.',
                                            class: 'error',
                                        })
                                    } else spaNavigate('/profile/orders/' + order.tibiId)
                                }}"
                            />
                        {/if}
                    {/each}
                </ul>
            {/await}
        </div>
    </section>
{/if}

<style lang="less">
    @import "../../../assets/css/variables.less";
    .order-table:global {
        .inner-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
            width: 100%;
            gap: 2.4rem;

            .headline {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: flex-end;
                & > div {
                    display: flex;
                    flex-direction: column;
                    gap: 2.4rem;
                    h2 {
                        color: var(--text-invers-100);
                        text-align: left;
                        flex-grow: 1;
                    }
                }
                ul {
                    display: flex;
                    justify-content: flex-end;
                    flex-direction: row;
                    width: fit-content;
                    color: var(--text-invers-100);
                    gap: 12px;
                    button {
                        color: var(--text-invers-100);
                        padding: 4px;
                        border-radius: 4px;
                        &.active {
                            background-color: var(--text-invers-100);
                            color: var(--neutral-white);
                        }
                    }
                }
            }
            & > ul {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 1.2rem;
                & > li {
                    width: 100% !important;
                    max-width: 100%;
                }
                &.card {
                    display: grid;
                    flex-wrap: wrap;
                    align-items: stretch;
                    gap: 2.4rem;
                    grid-template-columns: 1fr 1fr;
                    @media (max-width: 600px) {
                        grid-template-columns: 1fr;
                    }
                    @media (min-width: 1500px) {
                        grid-template-columns: 1fr 1fr 1fr;
                    }

                    @media (min-width: 1920px) {
                        grid-template-columns: 1fr 1fr 1fr 1fr;
                    }

                    & > li {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>
