import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { sbCompPrefix } from '../../global/storybook-utils';
import CvDropdown from './CvDropdown.vue';
import CvDropdownItem from './CvDropdownItem.vue';
import CvDropdownSkeleton from './CvDropdownSkeleton.vue';
import { action } from '@storybook/addon-actions';
import { ref } from 'vue';
const myValue = ref('baby-yoda');

<Meta title={`${sbCompPrefix}/CvDropdown`} component={CvDropdown} />

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvDropdown,
    CvDropdownItem,
    CvDropdownSkeleton,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      ...args,
      props: args.props,
      light: args.light,
      placeholder: args.placeholder,
      value: args.value,
      label: args.label,
      up: args.up,
      inline: args.inline,
      helperText: args.helperText,
      hideSelected: args.hideSelected,
      warningMessage: args.warningMessage,
      invalidMessage: args.invalidMessage,
      disabled: args.disabled,
      size: args.size,
      items: args.items,
      onChange: action('change'),
      myValue: myValue,
      slotInvalidText: args.slotInvalidText,
      slotWarningText: args.slotWarningText,
      slotHelperText: args.slotHelperText,
      slotInternalCaption: args.slotInternalCaption,
    };
  },
  template: args.template,
});
const defaultTemplate = `
<div :style="{width: '300px', paddingTop: up ? '90px' : undefined}">
<cv-dropdown
  :light="light"
  :placeholder="placeholder"
  :modelValue="modelValue"
  :up="up"
  :inline="inline"
  :helper-text="helperText"
  :warning-message="warningMessage"
  :hide-selected="hideSelected"
  :invalid-message="invalidMessage"
  :label="label"
  :disabled="disabled"
  :size="size"
  @change="onChange">
          <cv-dropdown-item value="mando"><span style="color: darkred">Din Djarin</span></cv-dropdown-item>
          <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
          <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
          <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
          <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
 </cv-dropdown>
</div>
`;
const slotsTemplate = `
<div :style="{width: '300px'}">
<cv-dropdown
  v-model="myValue"
  :light="light"
  :placeholder="placeholder"
  :up="up"
  :inline="inline"
  :helper-text="helperText"
  :warning-message="warningMessage"
  :hide-selected="hideSelected"
  :invalid-message="invalidMessage"
  :label="label"
  :disabled="disabled"
  :size="size"
  @change="onChange">
    <template v-if="slotInternalCaption" v-slot:internal-caption><h5>Edge case: {{ myValue }}</h5></template>
    <template v-if="slotInvalidText" v-slot:invalid-message>Do not go to the dark side</template>
    <template v-if="slotWarningText" v-slot:warning-message>Can this ally be trusted?</template>
    <template v-if="slotHelperText" v-slot:helper-text>Choose ally strong with the force</template>
    <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
    <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
    <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
    <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
    <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
 </cv-dropdown>
</div>
`;
const itemsTemplate = `
<div :style="{width: '300px'}">
<cv-dropdown
  :light="light"
  :placeholder="placeholder"
  :modelValue="modelValue"
  :up="up"
  :inline="inline"
  :helper-text="helperText"
  :warning-message="warningMessage"
  :hide-selected="hideSelected"
  :invalid-message="invalidMessage"
  :label="label"
  :disabled="disabled"
  :size="size"
  :items="items"
  @change="onChange">
 </cv-dropdown>
</div>
`;
const vmodelTemplate = `
<div :style="{width: '300px'}">
<cv-dropdown
  v-model="myValue"
  :label="label"
  :placeholder="placeholder"
  @change="onChange">
    <cv-dropdown-item value="mando"><span>Din Djarin</span></cv-dropdown-item>
    <cv-dropdown-item value="nite-owl">Bo-Katan Kryze</cv-dropdown-item>
    <cv-dropdown-item value="baby-yoda">Din Grogu</cv-dropdown-item>
    <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
    <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
 </cv-dropdown>
 <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
 <div>V-Model value: {{ myValue }}</div>
  <select v-model="myValue">
    <option value="mando">Mandalorian</option>
    <option value="nite-owl">Bo-Katan</option>
    <option value="baby-yoda">Grogu</option>
    <option value="mysterious">Armorer</option>
    <option value="bounty-hunter">Karga</option>
    <option value="none">None</option>
  </select>
  <div>
  <button @click="myValue = undefined">Clear value</button>
  </div>
  </div>
</div>
`;
const skeletonTemplate = `
<div :style="{width: '300px'}">
<cv-dropdown-skeleton :inline="inline"></cv-dropdown-skeleton>
</div>
`;

# CvDropdown

Notes:

- You can place a Dropdown inline with other content by using the inline variant

Migration notes:
- **Breaking**. The selected item contents are no longer copied directly to the "internal caption". If you are trying to style both
the drop-down item and its appearance after it is selected, please see the `internal-caption` slot. See the "Slots"
story for an example.- Added the `size` option to match Carbon React
- Added the `warningMessage` option to match Carbon React


<Canvas>
  <Story
    name="Default"
    parameters={{
      controls: {
        exclude: [
          'props',
          'default',
          'template',
          'change',
          'update:modelValue',
          'helper-text',
          'invalid-message',
          'warning-message',
          'internal-caption',
        ],
      },
      docs: { source: { code: defaultTemplate } },
    }}
    args={{
      template: defaultTemplate,
      label: 'Characters',
      placeholder: 'Choose an ally',
      helperText: 'May the force be with you',
      light: false,
    }}
    argTypes={{
      light: {
        type: String,
        description: '`true` to use the light version',
        table: { category: 'props' },
      },
      size: {
        control: 'select',
        default: 'md',
        options: ['sm', 'md', 'lg'],
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Use slots with helper, invalid, warning text, and the internal caption

<Canvas>
  <Story
    name="Slots"
    parameters={{
      controls: {
        exclude: [
          'props',
          'default',
          'template',
          'change',
          'update:modelValue',
          'update:value',
          'helper-text',
          'invalid-message',
          'warning-message',
          'internal-caption',
          'modelValue',
          'ariaLabel',
          'disabled',
          'formItem',
          'helperText',
          'hideSelected',
          'inline',
          'invalidMessage',
          'items',
          'label',
          'placeholder',
          'size',
          'up',
          'value',
          'warningMessage',
        ],
      },
      docs: { source: { code: slotsTemplate } },
    }}
    args={{
      template: slotsTemplate,
      label: 'Characters',
      placeholder: 'Choose an ally',
      slotInvalidText: false,
      slotWarningText: false,
      slotHelperText: true,
      slotInternalCaption: false,
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Use an array of strings as the dropdown options

- Notes: this version does not seem very useful. Please comment in the Slack channel if you are using this.
  Curious to know how it might be currently used.

<Canvas>
  <Story
    name="Items"
    parameters={{
      controls: {
        exclude: [
          'props',
          'default',
          'template',
          'change',
          'update:modelValue',
          'helper-text',
          'invalid-message',
          'warning-message',
          'internal-caption',
          'modelValue',
          'ariaLabel',
          'disabled',
          'formItem',
          'helperText',
          'hideSelected',
          'inline',
          'invalidMessage',
          'items',
          'label',
          'placeholder',
          'size',
          'up',
          'value',
          'warningMessage',
        ],
      },
      docs: { source: { code: itemsTemplate } },
    }}
    args={{
      template: itemsTemplate,
      label: 'Planets',
      placeholder: 'Where will you visit',
      items: ['Coruscant', 'Tatooine', 'Naboo', 'Hoth', 'Kamino', 'Mandalore'],
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Use with v-model

<Canvas>
  <Story
    name="v-model"
    parameters={{
      controls: {
        include: [
        ],
      },
      docs: { source: { code: vmodelTemplate } },
    }}
    args={{
      template: vmodelTemplate,
      label: 'Characters',
      placeholder: 'Choose an ally',
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Skeleton - loading mode

- Notes: The Vue 2 story shows the `inline` attribute for the skeleton mode but this seems to have no effect on the display.
  It is still supported but do not expect a change in display.

<Canvas>
  <Story
    name="skeleton"
    parameters={{
      controls: {
        include: [
        ],
      },
      docs: { source: { code: skeletonTemplate } },
    }}
    args={{
      template: skeletonTemplate,
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>