<script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { Input } from '$shared/shadcn/ui/input';
import { ComparisonSlider } from '$shared/ui';
import { displayedFontsStore } from '../../model';
import PairSelector from '../PairSelector/PairSelector.svelte';

let displayedText = $state('The quick brown fox jumps over the lazy dog...');
const [fontA, fontB] = $derived(displayedFontsStore.selectedPair);
const hasAnyPairs = $derived(displayedFontsStore.fonts.length > 0);

$effect(() => {
    appliedFontsManager.touch(displayedFontsStore.fonts.map(font => font.id));
});
</script>

{#if hasAnyPairs}
    <div class="flex flex-col gap-4">
        <div class="flex flex-row gap-4">
            <Input bind:value={displayedText} />
            <PairSelector />
        </div>

        {#if fontA && fontB}
            <ComparisonSlider fontA={fontA} fontB={fontB} text={displayedText} />
        {/if}
    </div>
{/if}
