import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"
import VSearchBar from "~/components/VHeader/VSearchBar/VSearchBar.vue"

<Meta
  title="Components/VHeader/Search bar"
  component={VSearchBar}
  argTypes={{
    input: {
      action: "input",
    },
    submit: {
      action: "submit",
    },
  }}
/>

export const Template = (args) => ({
  template: `
    <VSearchBar v-bind="args" v-on="args">
      <span class="info text-xs font-semibold text-dark-charcoal-70 mx-4 whitespace-nowrap group-hover:text-dark-charcoal group-focus:text-dark-charcoal">
        12,345 results
      </span>
    </VSearchBar>`,
  components: { VSearchBar },
  setup() {
    return { args }
  },
})

# Search bar

<Description of={VSearchBar} />

<ArgsTable of={VSearchBar} />

The component emits an `input` event with the new contents of the field whenever
the field receives an input. It also emits the `search` event when the search
button is clicked.

<Canvas>
  <Story
    name="Default"
    args={{
      value: "Search query",
      size: "medium",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

The recommended way to use it is with `v-model` mapping to a `String`
representing the search query.

export const vModelTemplate = (args) => ({
  template: `
    <div>
      <VSearchBar v-model="text" size="standalone" v-on="args">
        <span class="info text-xs font-semibold text-dark-charcoal-70 mx-4 whitespace-nowrap group-hover:text-dark-charcoal group-focus:text-dark-charcoal">
          {{ text.length }} chars
        </span>
      </VSearchBar>
      {{ text }}
    </div>
  `,
  components: { VSearchBar },
  data() {
    return {
      text: "Hello, World!",
    }
  },
  setup() {
    return { args }
  },
})

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

The `VSearchBar` component passes all attributes down to the inner `InputField`
which itself applies all its attributes to its inner `<input>` element. So it's
easy `<input>` attributes like placeholders or HTML validations.

<Canvas>
  <Story
    name="With placeholder"
    args={{
      placeholder: "Search query",
      size: "large",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
