import { slide, fly } from 'svelte/transition';

import mediaStore, { darkmode, reduced } from '@arzidava/svelte-media-store';

// 0 when "prefers-reduced-motion" is false, otherwise 500

const duration = reduced(0, 500);

// -500 on large screens, otherwise 500

const small = mediaStore('(min-width: 400px)', '-500', '500');

// change text based on orientation

const orientation = mediaStore('(orientation: landscape)', 'landscape', 'portrait')

// uses the default values for true and false

const isDark = darkmode()

let show = false;

</script>

<p>

Your screen has a {$orientation} orientation.

</p>

<select value={$isDark} disabled>

<option value={true}>Dark mode</option>

<option value={false}>Light mode</option>

</select>

<button on:click="{() => show = !show}">Toggle</button>

{#if show}

<div in:fly={{ x: $small, duration: $duration }}>

<p>

On screens larger than 400px this flies in from the left, otherwise from the right.

</p>

<p>

And it will not animate at all if the user has "prefers-reduced-motion".

</p>

</div>

{/if}