<script lang="ts">
import * as Item from '$shared/shadcn/ui/item';
import { Separator } from '$shared/shadcn/ui/separator/index';
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
import ComboControl from '$shared/ui/ComboControl/ComboControl.svelte';
import { fontSizeStore } from '../model/stores/fontSizeStore';
import { fontWeightStore } from '../model/stores/fontWeightStore';
import { lineHeightStore } from '../model/stores/lineHeightStore';

const fontSize = $derived($fontSizeStore);
const fontWeight = $derived($fontWeightStore);
const lineHeight = $derived($lineHeightStore);
</script>

<div class="w-full p-2">
    <Item.Root variant="outline" class="w-full p-2.5">
        <Item.Content class="flex flex-row items-center">
            <Sidebar.Trigger />
            <Separator orientation="vertical" class="h-full" />
            <ComboControl
                value={fontSize.value}
                onChange={fontSizeStore.setValue}
                onIncrease={fontSizeStore.increase}
                onDecrease={fontSizeStore.decrease}
                increaseDisabled={fontSizeStore.isAtMax()}
                decreaseDisabled={fontSizeStore.isAtMin()}
                increaseLabel="Increase Font Size"
                decreaseLabel="Decrease Font Size"
            />
            <ComboControl
                value={fontWeight.value}
                onChange={fontWeightStore.setValue}
                onIncrease={fontWeightStore.increase}
                onDecrease={fontWeightStore.decrease}
                increaseDisabled={fontWeightStore.isAtMax()}
                decreaseDisabled={fontWeightStore.isAtMin()}
                increaseLabel="Increase Font Weight"
                decreaseLabel="Decrease Font Weight"
            />
            <ComboControl
                value={lineHeight.value}
                onChange={lineHeightStore.setValue}
                onIncrease={lineHeightStore.increase}
                onDecrease={lineHeightStore.decrease}
                increaseDisabled={lineHeightStore.isAtMax()}
                decreaseDisabled={lineHeightStore.isAtMin()}
                increaseLabel="Increase Line Height"
                decreaseLabel="Decrease Line Height"
            />
        </Item.Content>
    </Item.Root>
</div>
