"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = BoxSkeleton;

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

var _BoxModule = _interopRequireDefault(require("./Box.module.css"));

var _getCompliedClassName5 = _interopRequireDefault(require("../../utils/getCompliedClassName"));

var _useFocusScope = _interopRequireDefault(require("../../accessibility-utils/useFocusScope"));

var _templateObject;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/* eslint-disable	react/no-unused-prop-types*/
function BoxSkeleton(props) {
  var _getCompliedClassName, _getCompliedClassName2, _getCompliedClassName3, _getCompliedClassName4;

  var refElement = /*#__PURE__*/_react["default"].createRef(null);

  (0, _useFocusScope["default"])({
    autoFocus: props.autoFocus || false,
    focusLoop: props.focusLoop || false,
    restoreFocus: props.restoreFocus || false,
    ref: function ref() {
      return refElement && refElement.current;
    },
    elementRef: refElement
  });
  var tagName = props.tagName;
  var isInline = props.isInline,
      isCover = props.isCover,
      direction = props.direction,
      justifyContent = props.justifyContent,
      wrap = props.wrap,
      align = props.align,
      scroll = props.scroll,
      isContainer = props.isContainer,
      flexible = props.flexible,
      basis = props.basis,
      isFirst = props.isFirst,
      isLast = props.isLast,
      shrink = props.shrink,
      column = props.column,
      alignSelf = props.alignSelf,
      spacing = props.spacing,
      customClassName = props.customClassName,
      customId = props.customId,
      customIdPrefix = props.customIdPrefix,
      customIdSuffix = props.customIdSuffix,
      tagAttributeProps = props.tagAttributeProps;
  var classNames = (0, _getCompliedClassName5["default"])(customClassName, (_getCompliedClassName = {}, _defineProperty(_getCompliedClassName, _BoxModule["default"].grow, !!flexible), _defineProperty(_getCompliedClassName, _BoxModule["default"].basis, !!(flexible && !basis)), _defineProperty(_getCompliedClassName, _BoxModule["default"].basis_auto, !!basis), _defineProperty(_getCompliedClassName, _BoxModule["default"].first, !!isFirst), _defineProperty(_getCompliedClassName, _BoxModule["default"].last, !!isLast), _defineProperty(_getCompliedClassName, _BoxModule["default"].shrink_on, !!shrink), _defineProperty(_getCompliedClassName, _BoxModule["default"].shrink_off, !shrink), _defineProperty(_getCompliedClassName, _BoxModule["default"][column], !!column), _defineProperty(_getCompliedClassName, _BoxModule["default"][alignSelf], !!alignSelf), _defineProperty(_getCompliedClassName, _BoxModule["default"][scroll], !!scroll), _defineProperty(_getCompliedClassName, _BoxModule["default"][spacing], !!spacing), _getCompliedClassName), (_getCompliedClassName2 = {}, _defineProperty(_getCompliedClassName2, customClassName.flexible, !!customClassName.flexible), _defineProperty(_getCompliedClassName2, customClassName.basis, !!customClassName.basis), _defineProperty(_getCompliedClassName2, customClassName.shrink, !!customClassName.shrink), _defineProperty(_getCompliedClassName2, customClassName.column, !!customClassName.column), _defineProperty(_getCompliedClassName2, customClassName.alignSelf, !!customClassName.alignSelf), _defineProperty(_getCompliedClassName2, customClassName.spacing, !!customClassName.spacing), _defineProperty(_getCompliedClassName2, customClassName.scroll, !!customClassName.scroll), _getCompliedClassName2));
  var classes = isContainer ? (0, _getCompliedClassName5["default"])(customClassName, (_getCompliedClassName3 = {}, _defineProperty(_getCompliedClassName3, _BoxModule["default"].flex, !isInline), _defineProperty(_getCompliedClassName3, _BoxModule["default"].inflex, !!isInline), _defineProperty(_getCompliedClassName3, _BoxModule["default"].cover, !!isCover), _defineProperty(_getCompliedClassName3, _BoxModule["default"][direction], !!direction), _defineProperty(_getCompliedClassName3, _BoxModule["default"][justifyContent], !!justifyContent), _defineProperty(_getCompliedClassName3, _BoxModule["default"][wrap], !!wrap), _defineProperty(_getCompliedClassName3, _BoxModule["default"][align], !!align), _getCompliedClassName3), (_getCompliedClassName4 = {}, _defineProperty(_getCompliedClassName4, customClassName.cover, !!customClassName.cover), _defineProperty(_getCompliedClassName4, customClassName.direction, !!customClassName.direction), _defineProperty(_getCompliedClassName4, customClassName.justifyContent, !!customClassName.justifyContent), _defineProperty(_getCompliedClassName4, customClassName.wrap, !!customClassName.wrap), _defineProperty(_getCompliedClassName4, customClassName.align, !!customClassName.align), _getCompliedClassName4)) : "";
  return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread({
    ref: refElement,
    children: props.children,
    "data-id": customId.box(_templateObject || (_templateObject = _taggedTemplateLiteral(["", " ", ""])), customIdPrefix, customIdSuffix),
    className: "".concat(classNames, " ").concat(classes)
  }, tagAttributeProps));
}
/*
export default class BoxSkeleton extends React.Component {
  constructor(props) {
    super(props);
    this.refElement = this.refElement.bind(this);
    this.setAutoFocus = this.setAutoFocus.bind(this);
    this.boxContent = null;
  }

  setAutoFocus() {
    let { autoFocus } = this.props;
    requestAnimationFrame(() => {
      autoFocusMethod(this.boxContent, autoFocus);
    });
  }

  componentDidMount() {
    let { autoFocus, focusLoop } = this.props;
    if (autoFocus) {
      this.setAutoFocus();
    }
    focusLoop && focusLoopMethod.create(this.boxContent);
  }

  componentWillUnmount() {
    let { focusLoop } = this.props;
    focusLoop && focusLoopMethod.remove(this.boxContent);
  }

  componentDidUpdate(prevProps) {
    let { focusLoop, autoFocus } = this.props;
    if (prevProps.focusLoop !== focusLoop) {
      if (focusLoop) {
        focusLoopMethod.create(this.boxContent);
      } else {
        focusLoopMethod.remove(this.boxContent);
      }
    }
    if (prevProps.autoFocus !== autoFocus) {
      if (autoFocus) {
        this.setAutoFocus();
      } else {
        autoFocusMethod(this.boxContent, false);
      }
    }
  }

  refElement(ele) {
    let { getRef } = this.props;
    this.boxContent = ele;
    getRef && getRef(ele);
  }

  render() {
    
  }
}
 */

/*{ <Box isContainer>
<Box isContainer display:flex  flex-basis margin>
	<Box>1</Box>
<Box>1</Box>
<Box>1</Box>
<Box>1</Box>
<Box>1</Box>
</Box>
<Box>

</Box>
<Box>

</Box>
<Box>

</Box>
</Box> } */