import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { CvSelect } from '.';
import { sbCompPrefix } from '../../global/storybook-utils';
import { action } from '@storybook/addon-actions';
import CvSelectOption from './CvSelectOption.vue';
import CvSelectOptgroup from './CvSelectOptgroup.vue';
import { PiggyBankSlot20 as PiggyBankSlot, TropicalWarning20 as TropicalWarning, FaceDizzy20 as FaceDizzy  } from '@carbon/icons-vue'
import { ref } from "vue";
const modelValue = ref('cv-select-option3');

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

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvSelect,
    CvSelectOption,
    CvSelectOptgroup,
    PiggyBankSlot,
    TropicalWarning,
    FaceDizzy,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      ...args,
      onChange: action('change'),
      modelValue
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: args.template,
});
const defaultTemplate = `
<div>
  <cv-select
      @change="onChange"
      :label="label"
      :size="size"
      :inline="inline"
      :invalidMessage="invalidMessage"
      :warningMessage="warningMessage"
      :helperText="helperText"
      :hideLabel="hideLabel"
      :light="light"
      :disabled="disabled"
      >
      <cv-select-option disabled selected hidden value="placeholder-item">Choose an option</cv-select-option>
      <cv-select-option value="so-long">A much longer cv-select-option that is worth having around to check how text flows</cv-select-option>
      <cv-select-optgroup label="Category 1">
        <cv-select-option value="cv-select-option1">cv-select-option 1</cv-select-option>
        <cv-select-option value="cv-select-option2">cv-select-option 2</cv-select-option>
      </cv-select-optgroup>
      <cv-select-optgroup label="Category 2">
        <cv-select-option value="cv-select-option3">cv-select-option 3</cv-select-option>
        <cv-select-option value="cv-select-option4">cv-select-option 4</cv-select-option>
      </cv-select-optgroup>
  </cv-select>
</div>
`;
const defaultCode = defaultTemplate.replace("v-bind='args'", '');
const slotsTemplate = `
  <div>
    <cv-select :label="label" :size="size" :light="light">
    <template v-if="slotHelperText" v-slot:helper-text><piggy-bank-slot/> {{slotHelperText}}</template>
    <template v-if="slotWarningText" v-slot:warning-message><tropical-warning/>{{slotWarningText}}</template>
    <template v-if="slotInvalidText" v-slot:invalid-message><face-dizzy/>{{slotInvalidText}}</template>
    <cv-select-option disabled="true" selected="true" hidden="true" value="placeholder-item">Choose an option</cv-select-option>
    <cv-select-option value="good">Good</cv-select-option>
    <cv-select-option value="bad">Bad</cv-select-option>
    <cv-select-option value="ugly">Ugly</cv-select-option>
    </cv-select>
  </div>
`;
const vModelTemplate =  (defaultTemplate + `
  <span>V-Model value</span>
  <select v-model="modelValue">
    <option value="cv-select-option1">cv-select-option 1</option>
    <option value="cv-select-option2">cv-select-option 2</option>
    <option value="cv-select-option3">cv-select-option 3</option>
    <option value="cv-select-option4">cv-select-option 4</option>
  </select>
`).replace("<cv-select", `<cv-select v-model="modelValue"`)
const vModelCode = defaultCode.replace("<cv-select", `<cv-select v-model="modelValue"`)

# CvSelect

**Migration notes:**

- The `warningText` was not available in v2 but is added here to match what is currently shown in the react storybook.
- The `size` property is also new and also added to match what is currently shown in the react storybook.

<Canvas>
  <Story
    name="Default"
    parameters={{
      controls: {
        exclude: [
          'default',
          'template',
          'invalid-message',
          'helper-text',
          'warning-message',
          'data',
          'change',
          'input',
          'multiple',
        ],
      },
      docs: { source: { code: defaultCode } },
    }}
    args={{
      data: {},
      template: defaultTemplate,
      label: 'Select label',
      size: 'md',
      inline: false,
      invalidMessage: '',
      warningMessage: '',
      helperText: 'Optional helper text',
      hideLabel: false,
      light: false,
      disabled: false,
    }}
    argTypes={{
      light: { table: { category: 'props' } },
      disabled: { table: { category: 'props' } },
      size: { control: 'select', default: 'md', options: ['sm', 'md', 'lg'] },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

Use slots for help, invalid, and warning for more control over the display.

<Canvas>
  <Story
    name="Slots"
    parameters={{
      controls: {
        exclude: [
          'default',
          'template',
          'invalid-message',
          'helper-text',
          'warning-message',
          'data',
          'change',
          'input',
          'multiple',
          'invalidMessage',
          'warningMessage',
          'helperText',
          'formItem',
          'inline',
          'hideLabel',
        ],
      },
      docs: { source: { code: slotsTemplate } },
    }}
    args={{
      data: {},
      template: slotsTemplate,
      label: 'Select label',
      size: 'md',
      light: false,
      slotHelperText: 'Slot helper text',
      slotWarningText: '',
      slotInvalidText: '',
    }}
    argTypes={{
      slotHelperText: { table: { category: 'slots' } },
      slotWarningText: { table: { category: 'slots' } },
      slotInvalidText: { table: { category: 'slots' } },
      light: { table: { category: 'props' } },
      size: { control: 'select', default: 'md', options: ['sm', 'md', 'lg'] },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


Create a two-way binding on CvSelect with v-model.

<Canvas>
  <Story
    name="v-model"
    parameters={{
      controls: {
        exclude: [
          'default',
          'template',
          'invalid-message',
          'helper-text',
          'warning-message',
          'data',
          'change',
          'input',
          'multiple',
        ],
      },
      docs: { source: { code: vModelCode } },
    }}
    args={{
      data: {},
      template: vModelTemplate,
      label: 'Select label',
      size: 'md',
      inline: false,
      invalidMessage: '',
      warningMessage: '',
      helperText: 'Optional helper text',
      hideLabel: false,
      light: false,
      disabled: false,
    }}
    argTypes={{
      light: { table: { category: 'props' } },
      disabled: { table: { category: 'props' } },
      size: { control: 'select', default: 'md', options: ['sm', 'md', 'lg'] },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>