import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useRef, useState } from 'react';
import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { Box, Button, Dialog, TextBody } from '../../index';
import Input from '../input';
import Label from '../label';
import { DialogBase } from '.';
export default {
  component: Dialog,
  title: addStoryInGroup(MID_LEVEL_BLOCKS, 'Dialog'),
  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 toggleDialog = function toggleDialog() {
    setActive(!active);
  };

  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: toggleDialog,
    label: "Open a dialog"
  }), /*#__PURE__*/React.createElement(Dialog, _extends({}, args, {
    active: active,
    onCloseClick: toggleDialog,
    onEscKeyDown: toggleDialog,
    onOverlayClick: toggleDialog
  }), /*#__PURE__*/React.createElement(Box, {
    padding: 4
  }, /*#__PURE__*/React.createElement(TextBody, null, "Here you can add arbitrary content."))));
};
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 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      primaryDialogActive = _useState4[0],
      setPrimaryDialogActive = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_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.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: openPrimaryDialog,
    label: "Open a dialog"
  }), /*#__PURE__*/React.createElement(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.createElement(Box, {
    padding: 4
  }, /*#__PURE__*/React.createElement(Input, null), /*#__PURE__*/React.createElement(Button, {
    onClick: openSecondaryDialog,
    label: "Open secondary dialog",
    marginTop: 3
  }), /*#__PURE__*/React.createElement(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.createElement(Box, {
    padding: 4
  }, /*#__PURE__*/React.createElement(Label, null, "First input", /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Label, null, "Second input", /*#__PURE__*/React.createElement(Input, null)))))));
};

export var DialogWithFocusStates = FocusStates.bind({});
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.'
    }
  }
};
export var DialogBaseStory = function DialogBaseStory(args) {
  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      active = _useState8[0],
      setActive = _useState8[1];

  var bodyRef = useRef(null);

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

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

  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
    onClick: openDialog,
    label: "Open a dialog base"
  }), /*#__PURE__*/React.createElement(DialogBase, _extends({
    active: active,
    onEscKeyDown: closeDialog,
    onOverlayClick: closeDialog
  }, args, {
    initialFocusRef: bodyRef
  }), /*#__PURE__*/React.createElement(Box, {
    padding: 4,
    ref: bodyRef
  }, /*#__PURE__*/React.createElement(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."))));
};