import React, { useState } from 'react';
import { ModalConfirm } from '.';
import { Button } from '../Button';
import { Header } from '../Modal/Header';
import { Body } from '../Modal/Body';

export default {
  title: 'ModalConfirm',
  component: ModalConfirm,
};

export const Default = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <ModalConfirm
        isOpen={open}
        onClose={() => {
          setOpen(false);
          alert('onClose event fired'); // eslint-disable-line no-alert
        }}
        onSubmit={() => {
          setOpen(false);
          alert('onSubmit event fired'); // eslint-disable-line no-alert
        }}
      >
        <Header>Modal Confirm</Header>
        <Body>
          <b>ModalConfirm</b> is just a normal <b>Modal</b> but with Footer
          having 2 buttons(Confirm and Cancel as default label but you can pass
          values to <i>actionButtonText</i>, <i>cancelButtonText</i> props to
          change them).
        </Body>
      </ModalConfirm>
    </>
  );
};
