<script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
import { cubicOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
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 => ({ slug: font.id, weight: controlManager.weight })),
    );
});
</script>

{#if hasAnyPairs}
    <div class="flex flex-col gap-4">
        <div class="flex flex-row gap-4">
            <PairSelector />
        </div>

        {#if fontA && fontB}
            <div in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}>
                <ComparisonSlider
                    fontA={fontA}
                    fontB={fontB}
                    bind:text={displayedText}
                />
            </div>
        {/if}
    </div>
{/if}
