import React from "react";
import Box from "../Box";
import boxConstants from "../Box.constantProps";
import style from "./Box__default.module.css";
import componentGroups from "../../../docs-utils/componentGroups";
import componentCategories from "../../../docs-utils/componentCategories";
export default class Box__default extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      spacing: boxConstants.spacing.small,
      align: boxConstants.alignSelf.center,
      column: boxConstants.column.column_3
    };
  }

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

  render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "spacing"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("spacing", e),
      value: this.state.spacing
    }, Object.keys(boxConstants.spacing).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: boxConstants.spacing[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("span", null, "column"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("column", e),
      value: this.state.column
    }, Object.keys(boxConstants.column).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: boxConstants.column[item],
      key: i
    }, item)))), /*#__PURE__*/React.createElement(Box, {
      direction: boxConstants.direction.row,
      wrap: boxConstants.wrap.wrap,
      isContainer: true
    }, /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      alignSelf: this.state.align,
      flexible: true,
      basis: true,
      isLast: true,
      isContainer: true
    }, /*#__PURE__*/React.createElement("div", {
      className: style.containment
    }, "flexible basis isLast", /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box1"), /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box11"))), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      alignSelf: this.state.align,
      basis: true
    }, /*#__PURE__*/React.createElement("div", {
      className: style.containment
    }, "basis", /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box2"), /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box21"))), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      alignSelf: this.state.align,
      flexible: true
    }, /*#__PURE__*/React.createElement("div", {
      className: style.containment
    }, "flexible", /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box3"), /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box31"))), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      alignSelf: this.state.align,
      shrink: true
    }, /*#__PURE__*/React.createElement("div", {
      className: style.containment
    }, "shrink", /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box4"))), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      column: this.state.column,
      alignSelf: this.state.align
    }, /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box5")), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      column: this.state.column,
      alignSelf: this.state.align
    }, /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box6")), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      column: this.state.column,
      alignSelf: this.state.align
    }, /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box7")), /*#__PURE__*/React.createElement(Box, {
      spacing: this.state.spacing,
      column: this.state.column,
      alignSelf: this.state.align,
      isFirst: true
    }, /*#__PURE__*/React.createElement("div", {
      className: style.containment
    }, "isFirst", /*#__PURE__*/React.createElement("div", {
      className: style.content
    }, "Box8")))));
  }

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