function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import restoreFocus from '../../../accessibility-utils/restoreFocusUtil';
import AccessibilityControl from '../AccessibilityControl';
import Box from '../../layout/Box';
import TextBox from '../../textbox/TextBox';
import Button from '@zohodesk/base/es/Button/Button';
import style from './AccessibilityControl.module.css';
import componentCategories from '../../../docs-utils/componentCategories';
import componentGroups from '../../../docs-utils/componentGroups';
import docConfig from './AccessibilityControl.model.docConfig';
import { DocsTabsViewer } from '@zohodesk/docs';

const AccessibilityControl__Model = props => {
  return /*#__PURE__*/React.createElement(Box, {
    className: style.box
  }, /*#__PURE__*/React.createElement(DocsTabsViewer, _extends({
    docConfig: docConfig,
    componentType: AccessibilityControl
  }, props)));
};

if (false) {
  AccessibilityControl__Model.docs = {
    componentGroup: componentGroups.Components,
    folderName: componentCategories.UCL
  };
}

export default AccessibilityControl__Model;
export class FocusLoop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      controlFocusLoop: true
    };
    this.handleFocusLoop = this.handleFocusLoop.bind(this);
  }

  handleFocusLoop() {
    this.setState({
      controlFocusLoop: !this.state.controlFocusLoop
    });
  }

  render() {
    return /*#__PURE__*/React.createElement(Box, {
      focusLoop: this.state.controlFocusLoop
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      color: Button.constantProps.color.primary,
      onClick: this.handleFocusLoop
    }, !this.state.controlFocusLoop ? 'Enable Focus Loop' : 'Disabled Focus Loop')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextBox, {
      placeholder: "TextBox-1"
    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextBox, {
      placeholder: "TextBox-2",
      autoFocus: true
    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextBox, {
      placeholder: "TextBox-3"
    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: '20px'
      }
    }, /*#__PURE__*/React.createElement(Button, {
      variant: Button.constantProps.variant.outlined
    }, "cancel")), /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: '20px'
      }
    }, /*#__PURE__*/React.createElement(Button, null, "submit")));
  }

}
export class UseRestoreFocus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen2: false,
      isOpen3: false,
      selectedValue2: '',
      selectedValue3: ''
    };
    this.handlePopupOpen2 = this.handlePopupOpen2.bind(this);
    this.handlePopupOpen3 = this.handlePopupOpen3.bind(this);
    this.handleClosePopup2 = this.handleClosePopup2.bind(this);
    this.handleClosePopup3 = this.handleClosePopup3.bind(this);
    this.handleLtKeyDown2 = this.handleLtKeyDown2.bind(this);
    this.handleLtKeyDown3 = this.handleLtKeyDown3.bind(this);
  }

  handlePopupOpen2(e) {
    this.setState({
      isOpen2: !this.state.isOpen2
    });
  }

  handlePopupOpen3(e) {
    this.setState({
      isOpen3: !this.state.isOpen3
    });
  }

  handleClosePopup2(selectedValue2) {
    this.setState({
      isOpen2: false,
      selectedValue2
    });
  }

  handleClosePopup3(selectedValue3) {
    this.setState({
      isOpen3: false,
      selectedValue3
    });
  }

  handleLtKeyDown2(selectedValue, e) {
    if (e.keyCode === 27) {
      this.handleClosePopup2(selectedValue);
    }
  }

  handleLtKeyDown3(selectedValue, e) {
    if (e.keyCode === 27) {
      this.handleClosePopup3(selectedValue);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.isOpen2 !== this.state.isOpen2) {
      if (this.state.isOpen2) {
        restoreFocus.create();
      } else {
        restoreFocus.remove(0);
      }
    }

    if (prevState.isOpen3 !== this.state.isOpen3) {
      if (this.state.isOpen3) {
        restoreFocus.create();
      } else {
        restoreFocus.remove(1);
      }
    }
  }

  render() {
    let listItem = ['listItem-1', 'listItem-2', 'listItem-3', 'listItem-4', 'listItem-5', 'listItem-6', 'listItem-7', 'listItem-8', 'listItem-9', 'listItem-10'];
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      onClick: this.handlePopupOpen2,
      tabIndex: "0"
    }, this.state.selectedValue2 ? this.state.selectedValue2 : 'isOpenPopup'), /*#__PURE__*/React.createElement(Box, {
      autoFocus: this.state.isOpen2,
      focusLoop: this.state.isOpen2,
      customStyle: this.state.isOpen2 ? style.popupContent : style.hidePopup
    }, listItem.map((item, index) => {
      let activeItem = this.state.selectedValue2 == item;
      return /*#__PURE__*/React.createElement("div", {
        className: style.popupList + (activeItem ? ' ' + style.popupListActive : ''),
        tabIndex: 0,
        key: index,
        "data-aria-focusstyle": style.popuplistFocus,
        "data-aria-autofocus": activeItem ? true : false,
        "data-aria-shortcut": "click:13-32",
        "data-aria-listitem": true,
        "data-aria-navigation": ['37', '38', '39', '40'],
        onClick: this.handleClosePopup2.bind(this, item),
        onKeyDown: this.handleLtKeyDown2.bind(this, this.state.selectedValue2)
      }, item, ' ');
    }), /*#__PURE__*/React.createElement(Button, {
      tagAttributes: {
        onKeyDown: this.handleLtKeyDown2.bind(this, this.state.selectedValue2),
        'data-aria-listitem': true,
        'data-aria-navigation': ['37', '38', '39', '40']
      },
      onClick: this.handlePopupOpen3,
      tabIndex: "0"
    }, this.state.selectedValue3 ? this.state.selectedValue3 + '2nd' : 'isOpenPopup'), /*#__PURE__*/React.createElement(Box, {
      autoFocus: this.state.isOpen3,
      focusLoop: this.state.isOpen3,
      customStyle: this.state.isOpen3 ? style.popupContent : style.hidePopup
    }, listItem.map((item, index) => {
      let activeItem = this.state.selectedValue3 == item;
      return /*#__PURE__*/React.createElement("div", {
        className: style.popupList + (activeItem ? ' ' + style.popupListActive : ''),
        tabIndex: 0,
        key: index,
        "data-aria-focusstyle": style.popuplistFocus,
        "data-aria-autofocus": activeItem ? true : false,
        "data-aria-shortcut": "click:13-32",
        "data-aria-listitem": true,
        "data-aria-navigation": ['37', '38', '39', '40'],
        onClick: this.handleClosePopup3.bind(this, item),
        onKeyDown: this.handleLtKeyDown3.bind(this, this.state.selectedValue3)
      }, item + '2nd', ' ');
    }))));
  }

}