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

import { ref } from "@nuxtjs/composition-api"
import VIcon from "~/components/VIcon/VIcon.vue"
import VSelectField from "~/components/VSelectField/VSelectField.vue"

import radioIcon from "~/assets/icons/radiomark.svg"

<Meta
  title="Components/VSelectField"
  component={VSelectField}
  argTypes={{
    "update:modelValue": {
      action: "update:modelValue",
    },
  }}
/>

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

export const baseArgs = {
  fieldId: "fruit",
  blankText: "Fruit",
  labelText: "Fruit",
  choices: [
    { key: "a", text: "Apple" },
    { key: "b", text: "Banana" },
    { key: "c", text: "Cantaloupe" },
  ],
}

# VSelectField

<Description of={VSelectField} />

<ArgsTable of={VSelectField} />

<Canvas>
  <Story name="Default" args={baseArgs}>
    {Template.bind({})}
  </Story>
</Canvas>

The recommended way to use it is with `v-model` mapping to a `String`. This
string value will be the `key` field of the selected choice.

export const vModelTemplate = (args) => ({
  template: `
    <div>
    <VSelectField v-model="choice" v-bind="args" />
    {{ choice }}
    </div>
  `,
  components: { VSelectField },
  setup() {
    const choice = ref("a")
    return { choice, args }
  },
})

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

## With icon

An icon, or anything else of a 24px &times; 24px size, can be added before the
dropdown by populating the `start` slot.

export const SlotTemplate = (args) => ({
  template: `
    <VSelectField v-bind="args">
    <template #start>
      <VIcon :icon-path="radioIcon">
    </template>
    </VSelectField>
  `,
  components: { VSelectField, VIcon },
  setup() {
    return { args, radioIcon }
  },
})

<Canvas>
  <Story name="With icon" args={baseArgs}>
    {SlotTemplate.bind({})}
  </Story>
</Canvas>

## With constraints

Note that the `max-width` CSS property can be set on a `VSelectField` but that
only applies to the rest state click target, the menu is unaffected. This means
once a long option is selected, it will get clipped.

export const ConstraintTemplate = (args) => ({
  template: `
    <VSelectField class="max-w-[100px]" v-bind="args" />`,
  components: { VSelectField, VIcon },
  setup() {
    return { args, radioIcon }
  },
})

<Canvas>
  <Story
    name="With constraints"
    args={{
      ...baseArgs,
      choices: [
        { key: "short", text: "Kiwi" },
        {
          key: "long",
          text: "Bob Gordon American Elderberry",
        },
      ],
    }}
  >
    {ConstraintTemplate.bind({})}
  </Story>
</Canvas>

## Without border

There is a variant of the select field without the border, currently used only
on the 404 page.

<Canvas>
  <Story name="Without border" args={{ ...baseArgs, variant: "borderless" }}>
    {Template.bind({})}
  </Story>
</Canvas>
