import React from "react";
import componentCategories from "../../../../docs-utils/componentCategories";
import componentGroups from "../../../../docs-utils/componentGroups";
import Grid from "../Grid";
import style from "./Grid__default.module.css";
import gridConstants from "../Grid.constantProps";
export default class Grid__default extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowGap: gridConstants.rowGap.none,
      columnGap: gridConstants.columnGap.none,
      align: gridConstants.align.horizontal,
      justifyContent: gridConstants.justifyContent.between,
      isInlineGrid: false
    };
  }

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

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

  render() {
    let {
      align,
      justifyContent,
      rowGap,
      columnGap,
      isInlineGrid
    } = this.state;
    return /*#__PURE__*/React.createElement("div", {
      className: style.boxCon
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "rowGap"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("rowGap", e),
      value: this.state.rowGap
    }, Object.keys(gridConstants.rowGap).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: gridConstants.rowGap[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(gridConstants.align).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: gridConstants.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(gridConstants.justifyContent).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: gridConstants.justifyContent[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("span", null, "columnGap"), /*#__PURE__*/React.createElement("select", {
      onChange: e => this.select("columnGap", e),
      value: this.state.columnGap
    }, Object.keys(gridConstants.columnGap).map((item, i) => /*#__PURE__*/React.createElement("option", {
      value: gridConstants.columnGap[item],
      key: i
    }, item))), /*#__PURE__*/React.createElement("input", {
      type: "checkbox",
      onChange: this.check.bind(this),
      checked: this.state.isInlineGrid
    }), " ", "isInlineGrid"), /*#__PURE__*/React.createElement("div", {
      className: style.boxCon
    }, /*#__PURE__*/React.createElement(Grid, {
      align: align,
      justifyContent: justifyContent,
      rowGap: rowGap,
      columnGap: columnGap,
      inlineGrid: isInlineGrid,
      customClassName: {
        grid: style.container
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: `${style.item} ${style.item1}`
    }, "1"), /*#__PURE__*/React.createElement("div", {
      className: `${style.item} ${style.item2}`
    }, "2"), /*#__PURE__*/React.createElement("div", {
      className: `${style.item} ${style.item3}`
    }, "3"), /*#__PURE__*/React.createElement("div", {
      className: `${style.item} ${style.item4}`
    }, "4"), /*#__PURE__*/React.createElement("div", {
      className: `${style.item} ${style.item5}`
    }, "5"), /*#__PURE__*/React.createElement("div", {
      className: `${style.item} ${style.item6}`
    }, "6"))));
  }

}
Grid__default.docs = {
  componentGroup: componentGroups.Templates,
  folderName: componentCategories.Layout
};