import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { CvProgress, CvProgressStep, CvProgressSkeleton } from '.';
import { Time20 as TimeIcon } from '@carbon/icons-vue';
// noinspection ES6PreferShortImport
import { sbCompPrefix } from '../../global/storybook-utils';
import { action } from '@storybook/addon-actions';
import {ref } from "vue";
const step3Invalid = ref(false)
const step4Disable = ref(false)
const step5Complete = ref(false)
function onStep4Disable() {
  step4Disable.value = !step4Disable.value
}
function onStep3Invalid() {
  step3Invalid.value = !step3Invalid.value
}
function onStep5Complete() {
  step5Complete.value = !step5Complete.value
}

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

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvProgress,
    CvProgressStep,
    TimeIcon,
    CvProgressSkeleton
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      initialStep: args.initialStep,
      steps: args.steps,
      vertical: args.vertical,
      spaceEqually: args.spaceEqually,
      step1: args.step1,
      step2: args.step2,
      step3: args.step3,
      step4: args.step4,
      step5: args.step5,
      completeIds: args.completeIds,
      invalidIds: args.invalidIds,
      disabledIds: args.disabledIds,
      onStepClicked: action('step-clicked'),
      step3Invalid,
      onStep3Invalid,
      step4Disable,
      onStep4Disable,
      step5Complete,
      onStep5Complete,
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: args.template,
});
const defaultTemplate = `
  <cv-progress
    :initial-step="initialStep"
    :steps="steps"
    :vertical="vertical"
    :space-equally="spaceEqually"
    @step-clicked="onStepClicked">
  </cv-progress>
`;
const slotTemplate = `
  <cv-progress
    :initial-step="initialStep"
    :vertical="vertical"
    :spaceEqually="spaceEqually"
    >
    <cv-progress-step
      id="step-1"
      :label="step1"
      :complete="completeIds.includes('step-1')"
      :invalid="invalidIds.includes('step-1')"
      :disabled="disabledIds.includes('step-1')"
      additionalInfo="with Meg Murry"
      description="time icon description"
      @step-clicked="onStepClicked"
      >
      <template v-slot:step-icon>
        <time-icon :class="[{['bx--progress__warning']:invalidIds.includes('step-1')}]"/>
      </template>
    </cv-progress-step>
    <cv-progress-step
      id="step-2"
      :label="step2"
      :complete="completeIds.includes('step-2')"
      :invalid="invalidIds.includes('step-2')"
      :disabled="disabledIds.includes('step-2')"
      additionalInfo="save Charles Wallace"
      @step-clicked="onStepClicked"
      >
    </cv-progress-step>
    <cv-progress-step
      id="step-3"
      :label="step3"
      :complete="completeIds.includes('step-3')"
      :invalid="step3Invalid"
      :disabled="disabledIds.includes('step-3')"
      additionalInfo="save the world"
      @step-clicked="onStepClicked"
      >
    </cv-progress-step>
    <cv-progress-step
      id="step-4"
      :label="step4"
      :complete="completeIds.includes('step-4')"
      :invalid="invalidIds.includes('step-4')"
      :disabled="step4Disable"
      additionalInfo="Twins Dennys and Sandy"
      @step-clicked="onStepClicked"
      >
    </cv-progress-step>
    <cv-progress-step
      id="step-5"
      :label="step5"
      :complete="step5Complete"
      :invalid="invalidIds.includes('step-5')"
      :disabled="disabledIds.includes('step-5')"
      additionalInfo="with Polyhymnia O'Keefe"
      @step-clicked="onStepClicked"
      >
    </cv-progress-step>
  </cv-progress>
  <div><button @click=onStep3Invalid>Toggle step 3 invalid</button></div>
  <div><button @click=onStep4Disable>Toggle step 4 disabled</button></div>
  <div><button @click=onStep5Complete>Toggle step 5 complete</button></div>
`;
const skeletonTemplate = `<cv-progress-skeleton :vertical="vertical" />`;

# CvProgress

**Migration notes:**

- The "current" icon is updated to match Carbon React
- Added the property `spaceEqually` to match Carbon React
- The property name `initialStep` is misleading. It is treated as the Current progress (currentIndex).
- To override the default icons, provide an icon in the `step-icon` slot in the `cv-progress-step`

<Canvas>
  <Story
    name="Default"
    parameters={{
      controls: {
        exclude: ['default', 'template', 'step-clicked'],
      },
      docs: { source: { code: defaultTemplate } },
    }}
    args={{
      template: defaultTemplate,
      steps: [
        'Planet Uriel',
        'The Happy Medium',
        'The Black Thing',
        'Rescue Dr. Murry',
        'Rescue Charles Wallace',
        'Back to Earth',
      ],
    }}
    argTypes={{
      initialStep: {
        control: {
          type: 'number',
          min: -1,
          max: 6,
        },
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Slotted

Use `cv-progress-step` for more control over the display.

<Canvas>
  <Story
    name="slotted"
    parameters={{
      controls: {
        exclude: ['default', 'template', 'step-clicked', 'steps'],
      },
      docs: { source: { code: slotTemplate } },
    }}
    args={{
      template: slotTemplate,
      step1: 'A Wrinkle in Time',
      step2: 'A Wind in the Door',
      step3: 'A Swiftly Tilting Planet',
      step4: 'Many Waters',
      step5: 'An Acceptable Time',
      vertical: true,
      completeIds: [],
      invalidIds: [],
      disabledIds: [],
    }}
    argTypes={{
      initialStep: {
        control: {
          type: 'number',
          min: -1,
          max: 6,
        },
      },
      disabledIds: {
        control: 'multi-select',
        options: ['step-1', 'step-2', 'step-3', 'step-5'],
      },
      completeIds: {
        control: 'multi-select',
        options: ['step-1', 'step-2', 'step-3', 'step-4'],
      },
      invalidIds: {
        control: 'multi-select',
        options: ['step-1', 'step-2', 'step-4', 'step-5'],
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Skeleton

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