import React from 'react';
import SprkModal from './SprkModal';
import { markdownDocumentationLinkBuilder } from '../../../../storybook-utilities/markdownDocumentationLinkBuilder';
import Mask from './Mask';
import CloseButton from './CloseButton';
import ModalFooter from './ModalFooter';

export default {
  title: 'Components/Modal',
  component: SprkModal,
  decorators: [
    story => <div className="sprk-o-Box">{story()}</div>
  ],
  parameters: {
    subcomponents: {
      Mask,
      ModalFooter,
      CloseButton,
    },
    jest: [
      'SprkModal',
      'CloseButton',
      'Mask',
      'ModalFooter',
    ],
    info: `
${markdownDocumentationLinkBuilder('modal')}
- There are two parts to a Modal 
    - 1. Modal Trigger (typically in the form of a Button) - When
    pressed, it triggers the Modal to appear. 
    - 2. The Modal – Containing the information or actions. 
- The Modal and background mask are hidden by default.
- A Modal should not be launched from within another Modal. 
- The \`data-id\` property is provided as a hook for automated tools.
Each instance should have a unique \`data-id\` property.
("modal-choice-1", "modal-choice-2", "modal-info-1", etc).
- Wait Modal visibility is controlled by writing a function
that sets the value of the \`isVisible\` property. 
`,
  },

};

export const defaultStory = () => (
  <SprkModal
    title="Default Modal"
    isVisible={true}
    confirmText="Confirm Text"
    cancelText="Cancel Text"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </SprkModal>
);

defaultStory.story = {
  name: 'Default',
};

export const infoStory = () => (
  <SprkModal
    title="Info Modal"
    isVisible={true}
    variant="info"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </SprkModal>
);

infoStory.story = {
  name: 'Info',
};

export const waitStory = () => (
  <SprkModal
    title="Wait Modal"
    isVisible={true}
    variant="wait"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </SprkModal>
);

waitStory.story = {
  name: 'Wait',
};

@@ -1686,21 +1686,16 @@
 nst info
-Story
  = () =%3E
@@ -1932,21 +1932,16 @@
 );%0A%0Ainfo
-Story
 .story =
@@ -1980,21 +1980,16 @@
 nst wait
-Story
  = () =%3E
@@ -2226,21 +2226,16 @@
 );%0A%0Await
-Story
 .story =

update modal stories