"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Grid = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _constants = require("../../config/constants");

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _jsxRuntime = require("react/jsx-runtime");

// Generated with util/create-component.js
const Grid = props => {
  const {
    item = false,
    container = false,
    ...otherProps
  } = props;

  if (container) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridContainer, { ...otherProps
    });
  } else if (item) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridItem, { ...otherProps
    });
  } else {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "container or item prop missing"
    });
  }
};

exports.Grid = Grid;

const GridContainer = props => {
  const theme = (0, _useTheme.default)();
  const {
    children,
    spacing = 2,
    noWrap,
    className = null,
    ...otherProps
  } = props;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-GridContainer",
    ...otherProps,
    className: _style.default.dynamic([["1555999470", [spacing * theme.layout.spacingUnit, noWrap ? "no-wrap" : "wrap", spacing * theme.layout.spacingUnit, spacing * theme.layout.spacingUnit, spacing * theme.layout.spacingUnit, spacing * theme.layout.spacingUnit]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-GridContainer", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1555999470",
      dynamic: [spacing * theme.layout.spacingUnit, noWrap ? "no-wrap" : "wrap", spacing * theme.layout.spacingUnit, spacing * theme.layout.spacingUnit, spacing * theme.layout.spacingUnit, spacing * theme.layout.spacingUnit],
      children: `.Wps-GridContainer.__jsx-style-dynamic-selector{width:calc(100% + ${spacing * theme.layout.spacingUnit}px);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:${noWrap ? "no-wrap" : "wrap"};-ms-flex-wrap:${noWrap ? "no-wrap" : "wrap"};flex-wrap:${noWrap ? "no-wrap" : "wrap"};margin-top:-${spacing * theme.layout.spacingUnit}px;margin-left:-${spacing * theme.layout.spacingUnit}px;}.Wps-GridContainer.__jsx-style-dynamic-selector>.Wps-GridItem{padding-left:${spacing * theme.layout.spacingUnit}px;padding-top:${spacing * theme.layout.spacingUnit}px;}`
    }), children]
  });
};

const GridItem = props => {
  const theme = (0, _useTheme.default)();
  const {
    children,
    xs = true,
    sm = null,
    md = null,
    lg = null,
    xl = null,
    className = null,
    ...otherProps
  } = props;

  function handleXS() {
    if (typeof xs === "number") {
      return `width: calc(100% / ${_constants.COLUMNS_CONSTANT} * ${xs});`;
    } else if (typeof xs === "string") {
      return `width: ${xs};`;
    } else {
      return `flex-grow: 1;`;
    }
  }

  function handleSM() {
    if (typeof sm === "number") {
      return `width: calc(100% / ${_constants.COLUMNS_CONSTANT} * ${sm});`;
    } else if (typeof sm === "boolean") {
      return `flex-grow: 1;`;
    } else if (typeof sm === "string") {
      return `width: ${sm};`;
    } else {
      return "";
    }
  }

  function handleMD() {
    if (typeof md === "number") {
      return `width: calc(100% / ${_constants.COLUMNS_CONSTANT} * ${md});`;
    } else if (typeof md === "boolean") {
      return `flex-grow: 1;`;
    } else if (typeof md === "string") {
      return `width: ${md};`;
    } else {
      return "";
    }
  }

  function handleLG() {
    if (typeof lg === "number") {
      return `width: calc(100% / ${_constants.COLUMNS_CONSTANT} * ${lg});`;
    } else if (typeof lg === "boolean") {
      return `flex-grow: 1;`;
    } else if (typeof lg === "string") {
      return `width: ${lg};`;
    } else {
      return "";
    }
  }

  function handleXL() {
    if (typeof xl === "number") {
      return `width: calc(100% / ${_constants.COLUMNS_CONSTANT} * ${xl});`;
    } else if (typeof xl === "boolean") {
      return `flex-grow: 1;`;
    } else if (typeof xl === "string") {
      return `width: ${xl};`;
    } else {
      return "";
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-GridItem",
    ...otherProps,
    className: _style.default.dynamic([["2547672942", [handleXS(), theme.breakpoints.sm.min, handleSM(), theme.breakpoints.md.min, handleMD(), theme.breakpoints.lg.min, handleLG(), theme.breakpoints.xl.min, handleXL()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-GridItem", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "2547672942",
      dynamic: [handleXS(), theme.breakpoints.sm.min, handleSM(), theme.breakpoints.md.min, handleMD(), theme.breakpoints.lg.min, handleLG(), theme.breakpoints.xl.min, handleXL()],
      children: `.Wps-GridItem.__jsx-style-dynamic-selector{${handleXS()};}.Wps-GridItem.__jsx-style-dynamic-selector>.Wps-Container{height:100%;}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-GridItem.__jsx-style-dynamic-selector{${handleSM()};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-GridItem.__jsx-style-dynamic-selector{${handleMD()};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-GridItem.__jsx-style-dynamic-selector{${handleLG()};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-GridItem.__jsx-style-dynamic-selector{${handleXL()};}}`
    }), children]
  });
};