<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="toggleLock"
            >
                {{ 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="toggleAlert"
            >
                {{ alert ? "Turn off" : "Turn on" }}
            </UButton>
        </div>
    </main>
</template>

<script lang="ts" setup>
import axios from "axios"

const token = useToken()

const open = ref(true)
const locked = ref(true)
const alert = ref(false)

const toast = useToast()

async function toggleLock() {
    const desired = !locked.value
    axios
        .post(
            useAPI("/locked"),
            {
                locked: desired,
            },
            {
                headers: useHeaders(),
            }
        )
        .then((res) => {
            handleResponse(res, () => {
                toast.add({
                    title: `The door was ${desired ? "locked" : "unlocked"}`,
                })
                locked.value = desired
            })
        })
        .catch(handleRequestError)
}

async function toggleAlert() {
    const desired = !alert.value
    axios
        .post(useAPI("/alerts"), { alert: desired }, { headers: useHeaders() })
        .then((res) => {
            handleResponse(res, () => {
                toast.add({
                    title: `Alerts were turned ${desired ? "on" : "off"}`,
                })
                alert.value = desired
            })
        })
        .catch(handleRequestError)
}

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

    axios
        .get<boolean>(useAPI("/locked"), {
            headers: useHeaders(),
        })
        .then((res) => {
            handleResponse(res, (res) => {
                locked.value = res.data
            })
        })
        .catch(handleRequestError)

    axios
        .get<boolean>(useAPI("/alerts"), {
            headers: useHeaders(),
        })
        .then((res) => {
            handleResponse(res, (res) => {
                alert.value = res.data
            })
        })
        .catch(handleRequestError)
})
</script>
