import React, { useState } from 'react';
import { ModalInline, Box, Label, Button, Modal } from '../../index.js';
const variants = ['primary', 'danger', 'success', 'info', 'secondary', 'default', 'light'];
export const Default = props => {
  const {
    label,
    icon,
    title,
    variant,
    subTitle
  } = props;
  const [isVisible, setIsVisible] = useState(false);
  const modalProps = {
    label,
    icon,
    title,
    variant,
    subTitle,
    onOverlayClick: () => setIsVisible(false),
    onClose: () => setIsVisible(false),
    buttons: [{
      label: 'Cancel'
    }, {
      label: 'Delete',
      variant
    }]
  };
  return /*#__PURE__*/React.createElement(Box, {
    variant: "grey"
  }, /*#__PURE__*/React.createElement(Label, null, "Inline modal: ModalInline"), /*#__PURE__*/React.createElement(Box, {
    py: "xxl",
    width: 1
  }, /*#__PURE__*/React.createElement(ModalInline, modalProps)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, null, "Modal Trigger"), /*#__PURE__*/React.createElement(Button, {
    onClick: () => setIsVisible(!isVisible)
  }, "Toggle Modal"), isVisible && /*#__PURE__*/React.createElement(Modal, modalProps)));
};
export default {
  title: 'DesignSystem/Molecules/Modal',
  argTypes: {
    variant: {
      defaultValue: variants[0],
      options: variants,
      control: {
        type: 'select'
      }
    },
    title: {
      defaultValue: 'Are you sure you want to delete this car?',
      control: {
        type: 'text'
      }
    },
    subTitle: {
      defaultValue: 'This item will be deleted immediately. You can’t undo this action.',
      control: {
        type: 'text'
      }
    },
    icon: {
      defaultValue: 'Warning',
      control: {
        type: 'text'
      }
    },
    label: {
      defaultValue: 'Warning',
      control: {
        type: 'text'
      }
    }
  }
};