<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

  // @ts-ignore raw
  import componentDocs from './stories/docs/component.md?raw';
  // @ts-ignore raw
  import playAndLoopDocs from './stories/docs/playAndLoop.md?raw';
  // @ts-ignore raw
  import controlsDocs from './stories/docs/controls.md?raw';
  // @ts-ignore raw
  // import withSoundDocs from './stories/docs/withSound.md?raw';

  // @ts-ignore raw
  import SilentVideo from './stories/videos/silent-video.mp4';
  // @ts-ignore raw
  import SoundVideo from './stories/videos/sound-video.mp4';

  import Video from './Video.svelte';

  import {
    withComponentDocs,
    withStoryDocs,
  } from '$lib/docs/utils/withParams.js';
</script>

<Meta
  title="Components/Video"
  component="{Video}"
  {...withComponentDocs(componentDocs)}
/>

<Template let:args>
  <Video {...args} />
</Template>

<Story
  name="Default"
  args="{{
    ariaDescription: 'Compulsory description of your video for screen readers.',
    src: SilentVideo,
    width: 'wide',
    notes: 'Optional caption for your video.',
  }}"
/>

<Story
  name="Playing and looping"
  args="{{
    ariaDescription: 'Compulsory description of your video for screen readers.',
    src: SilentVideo,
    width: 'normal',
    loopVideo: true,
    notes:
      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
    playVideoThreshold: 0.9,
  }}"
  {...withStoryDocs(playAndLoopDocs)}
/>

<Story
  name="Controls"
  args="{{
    ariaDescription: 'Compulsory description of your video for screen readers.',
    src: SilentVideo,
    width: 'normal',
    notes:
      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
    playVideoThreshold: 0.9,
    controlsColour: 'white',
    controlsOpacity: 1,
    controlsPosition: 'bottom right',
    separateReplayIcon: true,
    loopVideo: false,
    hoverToSeeControls: true,
  }}"
  {...withStoryDocs(controlsDocs)}
/>

<Story
  name="Videos with sound"
  args="{{
    ariaDescription: 'Compulsory description of your video for screen readers.',
    src: SoundVideo,
    width: 'normal',
    notes:
      "World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",
    playVideoThreshold: 0.9,
    showControls: true,
    loopVideo: false,
    muteVideo: false,
    playVideoWhenInView: true,
    allowSoundToAutoplay: true,
  }}"
  {...withStoryDocs(controlsDocs)}
/>
