import React from 'react';
import imgUrl from '../../../images/accessibility.png';
import Button from '@zohodesk/base/es/Button/Button';
import Box from '../../layout/Box';
import TextBox from '../../textbox/TextBox';
import style from './AccessibilityControl.module.css';
import { FocusLoop } from './AccessibilityControl__Model.docs';
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'AccessibilityControl Component',
      imgUrl: imgUrl,
      description: 'All the children inside the whole App will be present here. This component is used to KeyBoard Accessibility'
    },
    tabsList: ['defaultFocuscss', 'customfocuscss', 'customAttriute'],
    tabsDetail: {
      defaultFocuscss: {
        displayName: 'Default Focus CSS',
        description: 'When focusing on an element when using this AccessibilityControl component a css will be loaded on it by default',
        componentsList: ['defaultFocuscss'],
        componentsDetail: {
          defaultFocuscss: {
            // eslint-disable-next-line react/display-name
            customStyle: {
              focuscss: style.bgColorGreen
            },
            bindEvent: 'div',
            // eslint-disable-next-line react/display-name
            children: () => {
              return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(TextBox, {
                placeholder: "TextBox-1"
              }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextBox, {
                placeholder: "TextBox-2"
              }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextBox, {
                placeholder: "TextBox-3"
              }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
                variant: Button.constantProps.variant.outlined
              }, "cancel"), " ", /*#__PURE__*/React.createElement(Button, null, "submit"));
            }
          }
        }
      },
      customfocuscss: {
        displayName: 'Custom Focus CSS',
        description: "This attribute 'data-aria-focusstyle' should be used to change the css when focusing on an element",
        componentsList: ['customfocuscss'],
        componentsDetail: {
          customfocuscss: {
            // eslint-disable-next-line react/display-name
            customStyle: {
              focuscss: style.bgColorGreen
            },
            bindEvent: 'div',
            // eslint-disable-next-line react/display-name
            children: () => {
              return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextBox, {
                placeholder: "TextBox-1",
                focusClass: style.customKbF
              })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextBox, {
                placeholder: "TextBox-2",
                focusClass: style.customKbF
              })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextBox, {
                placeholder: "TextBox-3",
                focusClass: style.customKbF
              })), /*#__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")));
            }
          }
        }
      },
      customAttriute: {
        displayName: "Custom Attribute's",
        description: `This All attribute's is used to KeyBoard accessibility`,
        componentsList: ['customAttriute'],
        componentsDetail: {
          customAttriute: {
            customStyle: {
              focuscss: style.bgColorGreen
            },
            bindEvent: 'div',
            // eslint-disable-next-line react/display-name
            children: () => {
              return /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "data-aria-shortcut = click:enter-space"), /*#__PURE__*/React.createElement("li", null, "data-aria-focusstyle = css className"), /*#__PURE__*/React.createElement("li", null, "data-accessibility-root = focuscss-props className "), /*#__PURE__*/React.createElement("li", null, "data-focus-added - current focus element added in attributed"));
            }
          }
        }
      }
    }
  };
});