<script setup lang="ts">
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import {
    NumberField,
    NumberFieldContent,
    NumberFieldDecrement,
    NumberFieldIncrement,
    NumberFieldInput,
} from '@/components/ui/number-field'
import AssignDevice from "./AssignDevice.vue";
import { ref } from "vue";
import Separator from "@/components/ui/separator/Separator.vue";
import DataRangePicker from "./DataRangePicker.vue";
const selectedUserIds = ref<string[]>([])
const usrIDs = selectedUserIds.value
</script>

<template>
    <Card class="flex w-full max-w-4xl mx-auto">
        <CardHeader class="pb-4">
            <CardTitle>
                Dashboard
            </CardTitle>
        </CardHeader>
        <CardContent class="flex-1 grid gap-4 py-4">
            <div class="grid gap-5">
                <div class="grid space-y-2 grid-cols-4 items-center">
                    <Label for="users">Allowed users</Label>
                    <AssignDevice v-model="usrIDs" class="col-span-3 w-full"></AssignDevice>
                </div>
            </div>

            <div class="flex space-x-4 pt-2 gap-4">
                <Button>Start recording</Button>
                <Button>Stop recording</Button>
            </div>
            <div class="space-y-2 gap-4">
                <NumberField id="duration" :default-value="120" :min="30">
                    <Label for="duration"> Record duration in seconds</Label>
                    <NumberFieldContent>
                        <NumberFieldDecrement></NumberFieldDecrement>
                        <NumberFieldInput></NumberFieldInput>
                        <NumberFieldIncrement></NumberFieldIncrement>
                    </NumberFieldContent>
                </NumberField>
            </div>

            <Separator class="my-6">Communication settings</Separator>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <NumberField id="polling" :default-value="60" :min="30">
                        <Label for="polling"> Timeout interwal in seconds </Label>
                        <NumberFieldContent>
                            <NumberFieldDecrement></NumberFieldDecrement>
                            <NumberFieldInput></NumberFieldInput>
                            <NumberFieldIncrement></NumberFieldIncrement>
                        </NumberFieldContent>
                    </NumberField>
                </div>
                <div class="space-y-2">

                    <NumberField id="jitter" :default-value="10" :min="5">
                        <Label for="jitter"> Jitter in seconds </Label>
                        <NumberFieldContent>
                            <NumberFieldDecrement></NumberFieldDecrement>
                            <NumberFieldInput></NumberFieldInput>
                            <NumberFieldIncrement></NumberFieldIncrement>
                        </NumberFieldContent>
                    </NumberField>
                </div>
            </div>
            <Separator></Separator>
            <div class="space-y-2 gap-4">
                <Label for="sleepdate">Date/time to sleep</Label>
                <DataRangePicker id="sleepdate"></DataRangePicker>
            </div>

        </CardContent>
    </Card>
</template>