import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplSearchBar from './RplSearchBar.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'
import { action } from '@storybook/addon-actions';

export const SingleTemplate = (args) => ({
  components: { RplSearchBar },
  setup() {
    return { args }
  },
  data: () => ({ inputValue: null }),
  computed: {
    suggestions() {
      const mockSuggestions = [
        'rip',
        'ripe',
        'ripen',
        'riptide',
        'ripple',
        'ripple component',
        'ripple components',
      ]
      if (!this.inputValue) {
        return []
      }
      return mockSuggestions.filter((val) => val.startsWith(this.inputValue))
    }
  },
  template: `<RplSearchBar v-bind="args" @onSubmit="submitAction" @update:input-value="onUpdate" :input-value="inputValue" :suggestions="suggestions" />`,
  methods: {
    submitAction: action('onSubmit'),
    onUpdate: function(val) {
      this.inputValue = val
    }
  }
})

<Meta
  title='Core/Navigation/Search bar'
  component={RplSearchBar}
  argTypes={{
    variant: {
      control: { type: 'radio' },
      options: ['default', 'reverse', 'menu']
    }
  }}
  args={{
    variant: 'default',
    placeholder: 'Placeholder text'
  }}
/>

# Search bar

<ArgsTable of={RplSearchBar} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      id: 'default'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Reverse'
    play={a11yStoryCheck}
    args={{
      id: 'reverse',
      variant: 'reverse'
    }}
    parameters={{
      background: 'gray',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Menu'
    play={a11yStoryCheck}
    args={{
      id: 'menu',
      variant: 'menu'
    }}
    parameters={{
      background: 'reverse',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
