<script setup lang="ts">
import TextInput from '@/components/TextInput.vue';
import { ref } from 'vue';
import TelemetryList from '@/components/TelemetryList.vue';
import type { TelemetryDefinition } from '@/composables/telemetry';
import TelemetryInfo from '@/components/TelemetryInfo.vue';
import FlexDivider from '@/components/FlexDivider.vue';

const searchValue = ref('');

const selected = ref<TelemetryDefinition | null>(null);
const mousedover = ref<TelemetryDefinition | null>(null);
</script>

<template>
    <div class="row stretch screen content center divider">
        <div class="column grow2 stretch no-min-height no-basis">
            <div class="row">
                <TextInput
                    autofocus
                    class="grow"
                    v-model="searchValue"
                    placeholder="Search"
                ></TextInput>
            </div>

            <div class="row scroll no-min-height">
                <div class="column grow stretch">
                    <TelemetryList
                        :search="searchValue"
                        v-model="selected"
                        @mouseover="
                            (mousedover_value) =>
                                (mousedover = mousedover_value)
                        "
                    ></TelemetryList>
                </div>
            </div>
        </div>
        <FlexDivider></FlexDivider>
        <div class="column grow stretch no-basis">
            <TelemetryInfo
                :mouseover="mousedover"
                :selection="selected"
            ></TelemetryInfo>
        </div>
    </div>
</template>

<style lang="scss">
@use '@/assets/variables';
</style>
