import React from "react";
/* eslint css-modules/no-unused-class: 0 */
import style from "./Box.module.css";
import getCompliedClassName from "../../utils/getCompliedClassName";
import useFocusScope from "../../accessibility-utils/useFocusScope";

/* eslint-disable	react/no-unused-prop-types*/
export default  function BoxSkeleton(props){

  let refElement = React.createRef(null); 

  useFocusScope({  autoFocus : props.autoFocus || false,
                   focusLoop : props.focusLoop || false,  
                   restoreFocus: props.restoreFocus || false,
                   ref : ()=>refElement && refElement.current,
                   elementRef : refElement
                });

  let { tagName } = props;
  let {
    isInline,
    isCover,
    direction,
    justifyContent,
    wrap,
    align,
    scroll,
    isContainer,

    flexible,
    basis,
    isFirst,
    isLast,
    shrink,
    column,
    alignSelf,
    spacing,

    customClassName,

    customId,
    customIdPrefix,
    customIdSuffix,
    tagAttributeProps
  } = props;
  let classNames = getCompliedClassName(
    customClassName,
    {
      [style.grow]: !!flexible,
      [style.basis]: !!(flexible && !basis),
      [style.basis_auto]: !!basis,
      [style.first]: !!isFirst,
      [style.last]: !!isLast,
      [style.shrink_on]: !!shrink,
      [style.shrink_off]: !shrink,
      [style[column]]: !!column,
      [style[alignSelf]]: !!alignSelf,
      [style[scroll]]: !!scroll,
      [style[spacing]]: !!spacing
    },
    {
      [customClassName.flexible]: !!customClassName.flexible,
      [customClassName.basis]: !!customClassName.basis,
      [customClassName.shrink]: !!customClassName.shrink,
      [customClassName.column]: !!customClassName.column,
      [customClassName.alignSelf]: !!customClassName.alignSelf,
      [customClassName.spacing]: !!customClassName.spacing,
      [customClassName.scroll]: !!customClassName.scroll
    }
  );
  let classes = isContainer
    ? getCompliedClassName(
        customClassName,
        {
          [style.flex]: !isInline,
          [style.inflex]: !!isInline,
          [style.cover]: !!isCover,
          [style[direction]]: !!direction,
          [style[justifyContent]]: !!justifyContent,
          [style[wrap]]: !!wrap,
          [style[align]]: !!align
        },
        {
          [customClassName.cover]: !!customClassName.cover,
          [customClassName.direction]: !!customClassName.direction,
          [customClassName.justifyContent]: !!customClassName.justifyContent,
          [customClassName.wrap]: !!customClassName.wrap,
          [customClassName.align]: !!customClassName.align
        }
      )
    : "";
  return React.createElement(tagName, {
    ref: refElement,
    children: props.children,
    "data-id": customId.box`${customIdPrefix} ${customIdSuffix}`,
    className: `${classNames} ${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> } */

