import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import Alert from './Alert';
import Box from '../box';
import Button from '../button';
import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
export default {
  component: Alert,
  title: addStoryInGroup(MID_LEVEL_BLOCKS, 'Alert'),
  parameters: {
    docs: {
      source: {
        type: 'code'
      }
    }
  }
};
export var DefaultStory = function DefaultStory(args) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

  var toggleAlert = function toggleAlert() {
    setActive(!active);
  };

  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: toggleAlert,
    label: "Open an alert"
  }), /*#__PURE__*/React.createElement(Alert, _extends({}, args, {
    active: active,
    onEscKeyDown: toggleAlert,
    onOverlayClick: toggleAlert
  })));
};
DefaultStory.args = {
  primaryAction: {
    label: 'Confirm',
    onClick: function onClick() {
      return console.log('primaryAction.onClick');
    }
  },
  secondaryAction: {
    label: 'Cancel',
    onClick: function onClick() {
      return console.log('secondaryAction.onClick');
    }
  },
  title: 'Alert title',
  body: 'I am the alert body text'
};
export var ConfirmationAlert = function ConfirmationAlert(args) {
  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      active = _useState4[0],
      setActive = _useState4[1];

  var toggleAlert = function toggleAlert() {
    setActive(!active);
  };

  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: toggleAlert,
    label: "Open a confirmation alert"
  }), /*#__PURE__*/React.createElement(Alert, _extends({}, args, {
    active: active,
    onEscKeyDown: toggleAlert,
    onOverlayClick: toggleAlert
  })));
};
ConfirmationAlert.args = {
  primaryAction: {
    label: 'Yes',
    onClick: function onClick() {
      return console.log('primaryAction.onClick');
    }
  },
  secondaryAction: {
    label: 'Cancel',
    onClick: function onClick() {
      return console.log('secondaryAction.onClick');
    }
  },
  title: 'Confirmation alert title',
  body: 'I am the alert body text',
  type: 'confirm'
};
export var DestructiveAlert = function DestructiveAlert(args) {
  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      active = _useState6[0],
      setActive = _useState6[1];

  var toggleAlert = function toggleAlert() {
    setActive(!active);
  };

  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: toggleAlert,
    label: "Open a destructive alert"
  }), /*#__PURE__*/React.createElement(Alert, _extends({}, args, {
    active: active,
    onEscKeyDown: toggleAlert,
    onOverlayClick: toggleAlert
  })));
};
DestructiveAlert.args = {
  primaryAction: {
    label: 'Delete',
    onClick: function onClick() {
      return console.log('primaryAction.onClick');
    }
  },
  secondaryAction: {
    label: 'Cancel',
    onClick: function onClick() {
      return console.log('secondaryAction.onClick');
    }
  },
  title: 'Destructive alert title',
  body: 'I am the alert body text',
  type: 'destructive'
};
export var ErrorAlert = function ErrorAlert(args) {
  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      active = _useState8[0],
      setActive = _useState8[1];

  var toggleAlert = function toggleAlert() {
    setActive(!active);
  };

  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: toggleAlert,
    label: "Open a legacy error alert"
  }), /*#__PURE__*/React.createElement(Alert, _extends({}, args, {
    active: active,
    onEscKeyDown: toggleAlert,
    onOverlayClick: toggleAlert
  })));
};
ErrorAlert.args = {
  primaryAction: {
    label: 'Ok',
    onClick: function onClick() {
      return console.log('primaryAction.onClick');
    }
  },
  title: 'Error alert title',
  body: 'I am the alert body text',
  type: 'error'
};