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

import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue"
import { useFeatureFlagStore } from "~/stores/feature-flag"

<Meta
  title="Components/VContentSwitcher/VSearchTypePopover"
  components={VSearchTypePopover}
  argTypes={{
    select: {
      action: "select",
    },
    additionalTypes: {
      control: { type: "boolean" },
    },
  }}
  args={{
    additionalTypes: false,
  }}
/>

export const Template = (args) => ({
  template: `<VSearchTypePopover active-item="image" v-bind="args" v-on="args"/>`,
  components: { VSearchTypePopover },
  setup() {
    const featureFlagStore = useFeatureFlagStore()
    featureFlagStore.toggleFeature(
      "external_sources",
      args.additionalTypes ? "on" : "off"
    )
    return { args }
  },
})

# VSearchTypePopover

<Description of={VSearchTypePopover} />

<ArgsTable of={VSearchTypePopover} />

<Canvas>
  <Story height="480px" name="Default">
    {Template.bind({})}
  </Story>
</Canvas>
