import React from 'react';
import Button, { BUTTON__TYPE_SUCCESS_OUTLINE } from '../../general/button/button';
import Container from '../../grid/container/container';
import Modal from './modal';
import { useState } from '@storybook/addons';
import { number, select, text } from '@storybook/addon-knobs';

const ModalStory = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  return (
    <Container>
      <Button label="Open" buttonStyles={BUTTON__TYPE_SUCCESS_OUTLINE}
              callback={() => setIsModalOpen(true)} />
      <Modal isOpen={isModalOpen} setIsOpen={setIsModalOpen} onCancel={() => setIsModalOpen(false)}
             title={text('title', Modal.defaultProps.title)}
             withFooter={select('withFooter', [true, false], Modal.defaultProps.withFooter)}
             width={number('width', Modal.defaultProps.width)}
      >
        Content goes here
      </Modal>
    </Container>
  );
}

export default ModalStory;