"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DialogWithFocusStates = exports.DialogBaseStory = exports.DefaultStory = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _utils = require("../../../.storybook/utils");

var _index = require("../../index");

var _input = _interopRequireDefault(require("../input"));

var _label = _interopRequireDefault(require("../label"));

var _ = require(".");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var _default = {
  component: _index.Dialog,
  title: (0, _utils.addStoryInGroup)(_utils.MID_LEVEL_BLOCKS, 'Dialog'),
  parameters: {
    docs: {
      source: {
        type: 'code'
      }
    }
  }
};
exports.default = _default;

var DefaultStory = function DefaultStory(args) {
  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      active = _useState2[0],
      setActive = _useState2[1];

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

  return /*#__PURE__*/_react.default.createElement(_index.Box, null, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: toggleDialog,
    label: "Open a dialog"
  }), /*#__PURE__*/_react.default.createElement(_index.Dialog, (0, _extends2.default)({}, args, {
    active: active,
    onCloseClick: toggleDialog,
    onEscKeyDown: toggleDialog,
    onOverlayClick: toggleDialog
  }), /*#__PURE__*/_react.default.createElement(_index.Box, {
    padding: 4
  }, /*#__PURE__*/_react.default.createElement(_index.TextBody, null, "Here you can add arbitrary content."))));
};

exports.DefaultStory = DefaultStory;
DefaultStory.args = {
  leftAction: {
    label: 'Remove',
    level: 'destructive',
    onClick: function onClick() {
      return console.log('leftAction.onClick');
    }
  },
  primaryAction: {
    label: 'Confirm',
    onClick: function onClick() {
      return console.log('primaryAction.onClick');
    }
  },
  secondaryAction: {
    label: 'Cancel',
    onClick: function onClick() {
      return console.log('secondaryAction.onClick');
    }
  },
  tertiaryAction: {
    children: 'Read more',
    onClick: function onClick() {
      return console.log('tertiaryAction.onClick');
    }
  },
  title: 'Dialog title'
};

var FocusStates = function FocusStates() {
  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      primaryDialogActive = _useState4[0],
      setPrimaryDialogActive = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      secondaryDialogActive = _useState6[0],
      setSecondaryDialogActive = _useState6[1];

  var closePrimaryDialog = function closePrimaryDialog() {
    setPrimaryDialogActive(false);
  };

  var openPrimaryDialog = function openPrimaryDialog() {
    setPrimaryDialogActive(true);
  };

  var closeSecondaryDialog = function closeSecondaryDialog() {
    setSecondaryDialogActive(false);
  };

  var openSecondaryDialog = function openSecondaryDialog() {
    setSecondaryDialogActive(true);
  };

  return /*#__PURE__*/_react.default.createElement(_index.Box, null, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: openPrimaryDialog,
    label: "Open a dialog"
  }), /*#__PURE__*/_react.default.createElement(_index.Dialog, {
    title: "Primary dialog",
    active: primaryDialogActive,
    onCloseClick: closePrimaryDialog,
    onEscKeyDown: closePrimaryDialog,
    onOverlayClick: closePrimaryDialog,
    primaryAction: {
      label: 'Confirm',
      onClick: function onClick() {
        return console.log('primaryAction.onClick');
      }
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Box, {
    padding: 4
  }, /*#__PURE__*/_react.default.createElement(_input.default, null), /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: openSecondaryDialog,
    label: "Open secondary dialog",
    marginTop: 3
  }), /*#__PURE__*/_react.default.createElement(_index.Dialog, {
    title: "Secondary dialog",
    active: secondaryDialogActive,
    onCloseClick: closeSecondaryDialog,
    onEscKeyDown: closeSecondaryDialog,
    onOverlayClick: closeSecondaryDialog,
    primaryAction: {
      label: 'Confirm',
      onClick: function onClick() {
        return console.log('primaryAction.onClick');
      }
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Box, {
    padding: 4
  }, /*#__PURE__*/_react.default.createElement(_label.default, null, "First input", /*#__PURE__*/_react.default.createElement(_input.default, null)), /*#__PURE__*/_react.default.createElement(_label.default, null, "Second input", /*#__PURE__*/_react.default.createElement(_input.default, null)))))));
};

var DialogWithFocusStates = FocusStates.bind({});
exports.DialogWithFocusStates = DialogWithFocusStates;
DialogWithFocusStates.parameters = {
  docs: {
    description: {
      story: 'A story showcasing how focus gets trapped in a dialog, following the specifications from https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html.'
    }
  }
};

var DialogBaseStory = function DialogBaseStory(args) {
  var _useState7 = (0, _react.useState)(false),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      active = _useState8[0],
      setActive = _useState8[1];

  var bodyRef = (0, _react.useRef)(null);

  var closeDialog = function closeDialog() {
    setActive(false);
  };

  var openDialog = function openDialog() {
    setActive(true);
  };

  return /*#__PURE__*/_react.default.createElement(_index.Box, null, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: openDialog,
    label: "Open a dialog base"
  }), /*#__PURE__*/_react.default.createElement(_.DialogBase, (0, _extends2.default)({
    active: active,
    onEscKeyDown: closeDialog,
    onOverlayClick: closeDialog
  }, args, {
    initialFocusRef: bodyRef
  }), /*#__PURE__*/_react.default.createElement(_index.Box, {
    padding: 4,
    ref: bodyRef
  }, /*#__PURE__*/_react.default.createElement(_index.TextBody, null, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."))));
};

exports.DialogBaseStory = DialogBaseStory;