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

            <p
                :class="`flex items-center justify-center text-${opened ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10 border-${opened ? (locked ? 'error' : 'secondary') : 'primary'} border-solid border-2 rounded-md`"
            >
                {{ opened ? "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-${alerts ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
            >
                <UIcon
                    :name="
                        alerts
                            ? 'material-symbols:volume-up'
                            : 'material-symbols:volume-off'
                    "
                    class="size-12 !w-16 !h-16"
                />
            </div>

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

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

const token = useToken()

const opened = ref(false)
const locked = ref(false)
const alerts = 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 = !alerts.value
    axios
        .post(useAPI("/alerts"), { alert: desired }, { headers: useHeaders() })
        .then((res) => {
            handleResponse(res, () => {
                toast.add({
                    title: `Alerts were turned ${desired ? "on" : "off"}`,
                })
                alerts.value = desired
            })
        })
        .catch(handleRequestError)
}

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

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

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

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