<script lang="ts">
	import { onMount } from "svelte";
	import { Card, CardHeader, CardBody, Button, FormGroup, Label, Input, InputGroup } from "@sveltestrap/sveltestrap";
	//import { telemetryStore } from '../lib/telemetry.ts'; // Import your telemetry store

	let telemetry: { latitude?: number; longitude?: number; altitude?: number } = {};
	let isCollapsed = false;

	// Subscribe to the telemetry store
	//const unsubscribe = telemetryStore.subscribe((data) => {
	//    telemetry = data;
	//});

	telemetry = {
		latitude: 56.3576,
		longitude: 39.8666,
		altitude: 1000,
	};

	// onMount(() => {
	//     return () => {
	//         unsubscribe(); // Cleanup subscription on component destroy
	//     };
	// });
</script>

<Card>
	<CardHeader
		class="bg-primary text-white d-flex justify-content-between align-items-center p-1 px-3"
		style="cursor:pointer;">
		<b class="card-title mb-0 p-0">Последние данные телеметрии</b>
		<Button class="p-0" size="sm" color="primary" on:click={() => (isCollapsed = !isCollapsed)}>
			{#if isCollapsed}
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					fill="currentColor"
					class="bi bi-caret-left-fill"
					viewBox="0 0 16 16">
					<path
						d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z" />
				</svg>
			{:else}
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					fill="currentColor"
					class="bi bi-caret-down"
					viewBox="0 0 16 16">
					<path
						d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
				</svg>
			{/if}
		</Button>
	</CardHeader>
	{#if !isCollapsed}
		<CardBody>
			<FormGroup spacing="mb-2">
				<Label class="small">Широта:</Label>
				<InputGroup size="sm">
					<Input type="text" value={telemetry.latitude || "N/A"} readonly />
				</InputGroup>
			</FormGroup>

			<FormGroup spacing="mb-2">
				<Label class="small">Долгота:</Label>
				<InputGroup size="sm">
					<Input type="text" value={telemetry.longitude || "N/A"} readonly />
				</InputGroup>
			</FormGroup>

			<FormGroup spacing="mb-2">
				<Label class="small">Высота (м):</Label>
				<InputGroup size="sm">
					<Input type="text" value={telemetry.altitude || "N/A"} readonly />
				</InputGroup>
			</FormGroup>
		</CardBody>
	{/if}
</Card>
