import React from "react";
import style from "./Box__default.module.css";
import Box from "../Box";
import boxConstants from "../Box.constantProps";
import componentGroups from "../../../docs-utils/componentGroups";
import componentCategories from "../../../docs-utils/componentCategories";
export default class Box__container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      direction: boxConstants.direction.column,
      align: boxConstants.align.left,
      justifyContent: boxConstants.justifyContent.between,
      isCover: false,
      wrap: boxConstants.wrap.wrap
    };
  }

  select(key, e) {
    this.setState({
      [key]: e.target.value
    });
  }

  check() {
    this.setState({
      isCover: !this.state.isCover
    });
  }

  render() {
    let {
      direction,
      align,
      justifyContent,
      isCover,
      wrap
    } = this.state;
    return /*#__PURE__*/React.createElement("div", {
      className: style.boxCon
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "direction"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("direction", e),
      value: this.state.direction
    }, Object.keys(boxConstants.direction).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: boxConstants.direction[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("span", null, "align"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("align", e),
      value: this.state.align
    }, Object.keys(boxConstants.align).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: boxConstants.align[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("span", null, "justifyContent"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("justifyContent", e),
      value: this.state.justifyContent
    }, Object.keys(boxConstants.justifyContent).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: boxConstants.justifyContent[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("span", null, "wrap"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("wrap", e),
      value: this.state.wrap
    }, Object.keys(boxConstants.wrap).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: boxConstants.wrap[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("input", {
      type: "checkbox",
      onChange: this.check.bind(this),
      checked: this.state.isCover
    }), " ", "isCover"), /*#__PURE__*/React.createElement("div", {
      className: style.boxCon
    }, /*#__PURE__*/React.createElement(Box, {
      direction: direction,
      align: align,
      justifyContent: justifyContent,
      isCover: isCover,
      wrap: wrap,
      isContainer: true
    }, /*#__PURE__*/React.createElement("span", {
      className: style.content
    }, "ch1"), /*#__PURE__*/React.createElement("span", {
      className: style.content
    }, "ch2"), /*#__PURE__*/React.createElement("span", {
      className: style.content
    }, "ch3"), /*#__PURE__*/React.createElement("span", {
      className: style.content
    }, "ch4"))));
  }

}
Box__container.docs = {
  componentGroup: componentGroups.Components,
  folderName: componentCategories.UCL
};