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'),
  },

};

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',
};

@@ -630,16 +630,20 @@
   info: 
+%60%0A$%7B
 markdown
@@ -675,16 +675,631 @@
 'modal')
+%7D%0A- There are two parts to a Modal %0A    - 1. Modal Trigger (typically in the form of a Button) - When%0A    pressed, it triggers the Modal to appear. %0A    - 2. The Modal %E2%80%93 Containing the information or actions. %0A- The Modal and background mask are hidden by default.%0A- A Modal should not be launched from within another Modal. %0A- The data-id property is provided as a hook for automated tools.%0AEach instance should have a unique data-id property.%0A(%22modal-choice-1%22, %22modal-choice-2%22, %22modal-info-1%22, etc).%0A- Wait Modal visibility is controlled by writing a function%0Athat sets the value of the 'isVisible' property. %0A%60
 ,%0A  %7D,%0A%0A

add modal docs to react storybook