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

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

<Meta
  title="Components/Audio track/Play-pause toggle"
  components={VPlayPause}
  argTypes={{
    status: {
      options: ["playing", "paused", "played"],
      defaultValue: "paused",
      control: "select",
    },
    size: {
      defaultValue: "medium",
      options: ["tiny", "small", "medium", "extra-large"],
      control: "select",
    },
    toggle: {
      action: "toggle",
    },
  }}
/>

export const Template = (args) => ({
  template: `<VPlayPause v-bind="args" v-on="args"/>`,
  components: { VPlayPause },
  setup() {
    return { args }
  },
})

# Play-pause toggle

<Description of={VPlayPause} />

<ArgsTable of={VPlayPause} />

It should be noted that the component emits the `toggle` event with the opposite
value of its `status` state.

## Size

The button dimensions can be set by passing the `size` prop (see
[`VIconButton` docs](?path=/docs/components-viconbutton--default-story)).

<Canvas>
  <Story
    name="Default"
    args={{
      status: "playing",
      size: "large",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Two-way binding

The recommended way to use it is with `v-model` mapping to a `String` that can
either be `'playing'`, `'paused'` or `'played'`.

It should be noted that both paused and played states change to playing when
toggled whereas the playing state toggles to paused. The played state can only
be achieved by playing till the end of a track.

export const vModelTemplate = () => ({
  template: `
    <div>
      <VPlayPause v-model="status" />
      {{ status }}
    </div>
  `,
  components: { VPlayPause },
  data() {
    return {
      status: "played",
    }
  },
})

<Canvas>
  <Story name="v-model">{vModelTemplate.bind({})}</Story>
</Canvas>

The component is, indirectly, a transparent wrapper over `<button>` so all
attributes of the button element can be applied to it, e.g. `disabled`.

<Canvas>
  <Story
    name="Disabled"
    args={{
      disabled: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
