<template>
    <main
        class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
    >
        <div class="flex items-center justify-center flex-col gap-y-2 w-32">
            <div
                :class="`flex items-center justify-center border-solid border-2 border-${open ? (locked ? 'error' : 'secondary') : 'primary'} rounded-lg w-full h-32`"
            >
                <UIcon
                    :name="
                        open
                            ? 'material-symbols:door-open'
                            : 'material-symbols:door-front'
                    "
                    class="size-12 !w-16 !h-16"
                />
            </div>

            <p
                :class="`flex items-center justify-center text-${open ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
            >
                {{ open ? "Opened" : "Closed" }}
            </p>
        </div>

        <div class="flex items-center justify-center flex-col gap-y-2 w-32">
            <div
                :class="`flex items-center justify-center border-solid border-2 border-${locked ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
            >
                <UIcon
                    :name="
                        locked
                            ? 'material-symbols:lock'
                            : 'material-symbols:lock-open'
                    "
                    class="size-12 !w-16 !h-16"
                />
            </div>

            <UButton
                :icon="
                    locked
                        ? 'material-symbols:lock-open'
                        : 'material-symbols:lock'
                "
                size="xl"
                :color="locked ? 'primary' : 'secondary'"
                variant="solid"
                class="flex items-center justify-center w-full h-10"
                @click="() => (locked = !locked)"
            >
                {{ locked ? "Unlock" : "Lock" }}
            </UButton>
        </div>

        <div class="flex items-center justify-center flex-col gap-y-2 w-32">
            <div
                :class="`flex items-center justify-center border-solid border-2 border-${alert ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
            >
                <UIcon
                    :name="
                        alert
                            ? 'material-symbols:volume-up'
                            : 'material-symbols:volume-off'
                    "
                    class="size-12 !w-16 !h-16"
                />
            </div>

            <UButton
                :icon="
                    alert
                        ? 'material-symbols:volume-off'
                        : 'material-symbols:volume-up'
                "
                size="xl"
                :color="alert ? 'primary' : 'secondary'"
                variant="solid"
                class="flex items-center justify-center w-full h-10"
                @click="() => (alert = !alert)"
            >
                {{ alert ? "Turn off" : "Turn on" }}
            </UButton>
        </div>
    </main>
</template>

<script lang="ts" setup>
const token = useToken()
const open = ref(true)
const locked = ref(true)
const alert = ref(false)

onMounted(() => {
    if (!token.value) {
        return navigateTo("/token")
    }
    console.log(token.value)
})
</script>
