import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { sbCompPrefix } from '../../global/storybook-utils';
import CvModal from './CvModal.vue';
import { action } from '@storybook/addon-actions';
import { nextTick, ref } from 'vue';

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

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvModal,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    const visible = ref(false);
    const visible3btn = ref(false);
    return {
      ...args,
      props: args.props,
      onModalHidden: action('modal-hidden'),
      onModalHideRequest: action('modal-hide-request'),
      onModalShown: action('modal-shown'),
      onOtherBtnClick: action('other-btn-click'),
      onPrimaryClick: action('primary-click'),
      onSecondaryClick: action('secondary-click'),
      visible,
      visible3btn,
      kind: args.kind,
      size: args.size,
      autoHideOff: args.autoHideOff,
      primaryButtonDisabled: args.primaryButtonDisabled,
      disableTeleport: args.disableTeleport,
      show: () => {
        if (visible3btn.value) visible3btn.value = false;
        if (visible.value) visible.value = false;
        nextTick(() => {
          visible.value = true;
        }).catch(() => console.warn('cannot show'));
      },
      show3btn: () => {
        if (visible.value) visible.value = false;
        if (visible3btn.value) visible3btn.value = false;
        nextTick(() => {
          visible3btn.value = true;
        }).catch(() => console.warn('cannot show'));
      },
      onAfterModalHidden() {
        action('after-modal-hidden')();
        visible.value = false;
        visible3btn.value = false;
      },
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: args.template,
});
const defaultTemplate = `
<div>
<cv-modal v-bind="props"
  :visible="visible"
  :kind="kind"
  :size="size"
  :autoHideOff="autoHideOff"
  :primaryButtonDisabled="primaryButtonDisabled"
  :disableTeleport="disableTeleport"
  @after-modal-hidden="onAfterModalHidden"
  @modal-hidden="onModalHidden"
  @modal-hide-request="onModalHideRequest"
  @modal-shown="onModalShown"
  @other-btn-click="onOtherBtnClick"
  @primary-click="onPrimaryClick"
  @secondary-click="onSecondaryClick">
  <template v-slot:label>Label of modal</template>
  <template v-slot:title>Title of modal</template>
  <template v-slot:content><p>Space: the final frontier. These are the voyages of the starship Enterprise. Its five-year mission: to explore strange new worlds; to seek out new life and new civilizations; to boldly go where no one has gone before!</p></template>
</cv-modal>
<!-- The show function sets the visible property to true  -->
<button @click="show">show</button>
</div>
`;
const buttonTemplate = `
<div>
<cv-modal v-bind="props"
  :visible="visible3btn"
  :kind="kind"
  :size="size"
  :autoHideOff="autoHideOff"
  :primaryButtonDisabled="primaryButtonDisabled"
  :disableTeleport="disableTeleport"
  @after-modal-hidden="onAfterModalHidden"
  @modal-hidden="onModalHidden"
  @modal-hide-request="onModalHideRequest"
  @modal-shown="onModalShown"
  @other-btn-click="onOtherBtnClick"
  @primary-click="onPrimaryClick"
  @secondary-click="onSecondaryClick">
  <template v-slot:label>Label of modal</template>
  <template v-slot:title>Title of modal</template>
  <template v-slot:content>
  <p>The term 'shields' first appears in the Star Trek episode "Balance of Terror", in which they were deployed, albeit to little effect, by a Federation outpost under attack from a Romulan Warbird. The first depicted use by a starship was in the Star Trek episode "Arena", in which the USS Enterprise raises its 'screens' after being attacked by an alien warship although the term 'shields' is not used in this episode. Shields are not mentioned during the earlier seasons of the Star Trek: Enterprise series, starships instead using "polarized hull plating" to make their hull more resistant to damage.</p>
  <br />
  <p>Like most technologies in the Star Trek fictional universe, the exact operation of shield technology is never precisely described. Characters discuss its existence and manipulation, while only superficially describing its exact physics, which result in a field being projected around a ship or other body, deflecting or dispersing projectiles and energy weapons. Shields are not shown unless struck, and are then often shown briefly for dramatic effect as a translucent bubble of energy.</p>
  <br />
  <p>Shields are said to be made of a screen of gravitons that can deflect beam and projectile weaponry.</p>
  <br />
  <p>https://en.wikipedia.org/wiki/Shields_(Star_Trek)</p>
  </template>
  <template v-slot:other-button>other</template>
  <template v-slot:secondary-button>secondary</template>
  <template v-slot:primary-button>primary</template>
</cv-modal>
<!-- The show function sets the visible property to true  -->
<button @click="show3btn">show</button>
</div>
`;

# CvModal

Migration notes:

- The modal uses the Vue [teleport](https://vuejs.org/guide/built-ins/teleport.html#basic-usage) to move the modal to the document body. This resolves some scrolling issues seen in the Vue 2 implementation.
  Set `disableTeleport` to true to revert to the Vue 2 behaviour.
- The `v-model` is different in Vue 3 than Vue 2. You can still specify the `v-model=something` to control the visibility but
  if you specify it like this you will see a deprecation message in the log. Please use `v-model:visible=something` instead.
- For the `size` attribute please use of the standard sizes 'xs', 'sm', 'md', or 'lg'. The 'large' and 'small' values still
  work but avoid using them.
- The `arial-label` was derived from the title slot but in this version it is an additional property with a default of 'Information modal'
- The `show` and `hide` methods can no longer be called directly. Use the `visible` property to control visability.
- The `modal-hide-request` no longer emits a `PointerEvent` instead just the reason is emitted. i.e. `{cv:reason: "external-click"}`

<Canvas>
  <Story
    name="Default"
    parameters={{
      controls: {
        exclude: [
          'props',
          'default',
          'template',
          'content',
          'label',
          'other-button',
          'primary-button',
          'secondary-button',
          'title',
          'after-modal-hidden',
          'modal-hidden',
          'modal-hide-request',
          'modal-shown',
          'other-btn-click',
          'primary-click',
          'secondary-click',
          'update:modelValue',
          'update:visible',
          'modelValue',
          'visible',
          'onOtherBtnClick',
          'onPrimaryClick',
          'onSecondaryClick',
        ],
      },
      docs: { source: { code: defaultTemplate } },
    }}
    args={{
      template: defaultTemplate,
      props: {
        modelValue: undefined,
      },
    }}
    argTypes={{
      kind: { control: 'select', default: '', options: ['', 'danger'] },
      size: {
        control: 'select',
        default: 'md',
        options: ['xs', 'sm', 'md', 'lg'],
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# CvModal with three buttons

<Canvas>
  <Story
    name="Three buttons"
    parameters={{
      controls: {
        exclude: [
          'props',
          'default',
          'template',
          'content',
          'label',
          'other-button',
          'primary-button',
          'secondary-button',
          'title',
          'after-modal-hidden',
          'modal-hidden',
          'modal-hide-request',
          'modal-shown',
          'other-btn-click',
          'primary-click',
          'secondary-click',
          'update:modelValue',
          'update:visible',
          'modelValue',
          'visible',
          'onOtherBtnClick',
          'onPrimaryClick',
          'onSecondaryClick',
        ],
      },
      docs: { source: { code: buttonTemplate } },
    }}
    args={{
      template: buttonTemplate,
      props: {
        modelValue: undefined,
      },
    }}
    argTypes={{
      kind: { control: 'select', default: '', options: ['', 'danger'] },
      size: {
        control: 'select',
        default: 'md',
        options: ['xs', 'sm', 'md', 'lg'],
      },
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>