import React from 'react';

import SprkModal from './SprkModal';

export default {
  title: 'Components|Modal',
  component: SprkModal,
};

export const defaultStory = () => (
  <SprkModal
    title="Default Modal"
    isVisible={true}
    confirmText="Confirm Text"
    cancelText="Cancel Text"
    confirmClick={() => {
      alert('confirm');
    }}
    cancelClick={() => {
      alert('cancel click');
    }}
  >
    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"
    confirmClick={() => {
      alert('confirm click');
    }}
    cancelClick={() => {
      alert('cancel click');
    }}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </SprkModal>
);

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

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

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

@@ -20,17 +20,67 @@
 react';%0A
+import %7B action %7D from '@storybook/addon-actions';
 %0A
-
 import S
@@ -357,35 +357,22 @@
 mClick=%7B
-() =%3E %7B%0A      alert
+action
 ('confir
@@ -374,23 +374,16 @@
 onfirm')
-;%0A    %7D
 %7D%0A    ca
@@ -397,50 +397,24 @@
 ck=%7B
-() =%3E %7B%0A      alert('cancel click');%0A    %7D
+action('cancel')
 %7D%0A  
@@ -743,112 +743,60 @@
 ck=%7B
-() =%3E %7B%0A      alert('confirm click');%0A    %7D%7D%0A    cancelClick=%7B() =%3E %7B%0A      alert('cancel click');%0A    %7D
+action('confirm')%7D%0A    cancelClick=%7Baction('cancel')
 %7D%0A  

add actions for SprkModal in React