import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"

import VWaveform from "~/components/VAudioTrack/VWaveform.vue"

<Meta
  title="Components/Audio track/Waveform"
  components={VWaveform}
  argTypes={{
    seeked: {
      action: "seeked",
    },
  }}
/>

export const Template = (args) => ({
  template: `<VWaveform class="w-full h-30" v-bind="args" v-on="args"/>`,
  components: { VWaveform },
  setup() {
    return { args }
  },
})

# Waveform

<Description of={Waveform} />

<ArgsTable of={Waveform} />

## Sampling

The waveform can automatically upsample and downsample the peaks data to the
required number of points, calculated using a combination of `barWidth` and
`barGap` values.

### Upsampling

Here 9 points are upsampled to as many as required to fill the viewport.

<Canvas>
  <Story
    name="Upsampling"
    args={{
      peaks: [0.5, 1, 0.5, 0, 0.5, 1, 0.5, 0, 0.5], // triangular wave with 9 points
      currentTime: 2,
      duration: 10,
      features: ["timestamps", "duration", "seek"],
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

### Downsampling

Here 1000 points are downsampled to as many as required to fill the viewport.

<Canvas>
  <Story
    name="Downsampling"
    args={{
      peaks: Array.from(
        { length: 1000 },
        (_, k) => 0.5 * Math.sin((k * 2 * Math.PI) / 500) + 0.5
      ), // sine wave with 1000 points
      currentTime: 2,
      duration: 10,
      features: ["timestamps", "duration", "seek"],
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Background

The background color for the waveform can be changed as required. To do so, set
the `--waveform-background-color` CSS custom property on the component or on the
`.waveform` class.

<Canvas>
  <Story
    name="Background"
    args={{
      peaks: [0.5, 1, 0.5, 0, 0.5],
      currentTime: 2,
      duration: 10,
      features: ["timestamps", "duration", "seek"],
      style: { "--waveform-background-color": "#d7fcd4" },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Sizing

The waveform always takes the height and width of its container.

- **Height:** the bars will elongate proportionally to scale vertically
- **Width:** the number of samples will be adjusted to scale horizontally

Thus the `barWidth` and `barGap` will be maintained even in the case of
horizontal scaling.

## Usable area

To leave some blank space at the top, for overlaying your own stuff, you can
pass a number less than 1 as the `usableFrac` prop. Note that the usable area
contains both the bars and the timestamps so the actual bar height is less than
`usableFrac`.

<Canvas>
  <Story
    name="With blank space"
    args={{
      peaks: [0.5, 1, 0.5, 0, 0.5],
      currentTime: 2,
      duration: 10,
      features: ["timestamps", "duration", "seek"],
      usableFrac: 0.5,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Features

Certain features in the waveform can be enabled or disabled, as required, to
meet the design requirements and space/information density constraints. The
`features` prop allows you to enable only the needed features.

<Canvas>
  <Story
    name="Selective features"
    args={{
      peaks: [0.5, 1, 0.5, 0, 0.5],
      currentTime: 2,
      duration: 10,
      features: ["timestamps", "duration", "seek"],
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Message state

The waveform bars are set to zero height when the `message` prop is passed. They
will animate up to their actual height when the prop is unset.

<Canvas>
  <Story
    name="Message"
    args={{
      message: "Hello, World!",
      audioId: 123,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
