function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable no-param-reassign */
import React, { useMemo, useState, useEffect } from "react";
import { makeStyles } from "@mui/styles";
import { Button, TextField, FormControl, Select, InputLabel, MenuItem, Checkbox, FormControlLabel } from "@mui/material";
import PropTypes from "prop-types";
import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
import { getTopicsFromAppName } from "../config/topics";
const useStyles = makeStyles(() => {
  return {
    formWrapper: {
      margin: "20px 0"
    },
    propToggler: {
      borderRadius: 0,
      marginBottom: 10,
      padding: 2,
      color: props => props.propsOpen ? "#76B833" : "rgb(118, 118, 118)",
      borderBottom: props => props.propsOpen ? "2px solid #76B833" : "none",
      transition: "color 100ms ease-in-out",
      "&:hover": {
        color: "#76B833",
        backgroundColor: "transparent"
      }
    },
    table: {
      margin: "25px 0",
      "& , *": {
        fontFamily: 'Consolas,"Liberation Mono",Menlo,monospace !important',
        fontSize: "13px !important"
      },
      "& .MuiFormControl-root": {
        width: 150
      },
      "& thead th": {
        fontFamily: '"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif',
        color: "black !important",
        textAlign: "left"
      },
      "& th, & td": {
        paddingRight: 16,
        paddingBottom: 8,
        verticalAlign: "top"
      },
      "& td > span.flex": {
        display: "flex",
        marginTop: 25
      }
    },
    colName: {
      width: "10%",
      color: "#690"
    },
    colType: {
      width: "10%",
      color: "#905"
    },
    colDefault: {
      width: "10%"
    },
    colDescription: {
      width: "45%"
    },
    colSelected: {
      width: "25%"
    }
  };
});
function DocForm(_ref) {
  let {
    value,
    onChange,
    filter = () => true,
    isIframe = false,
    propToggler = false,
    propConfig
  } = _ref;
  const [permalinkParams, setPermalinkParams] = useState(propConfig);
  const [propsOpen, togglePropsOpen] = useState(!propToggler);
  const classes = useStyles({
    propsOpen
  });
  const url = useMemo(() => {
    return new URL(value);
  }, [value]);
  const {
    searchParams
  } = url;
  useEffect(() => {
    var _url$pathname;
    const topicKey = ((_url$pathname = url.pathname) === null || _url$pathname === void 0 ? void 0 : _url$pathname.split("/")[1]) || propConfig[0].defaultValue;
    if (topicKey) {
      const topic = getTopicsFromAppName("wkp").find(t => t.key === topicKey);
      const layers = getLayersAsFlatArray(topic.layers || []).filter(l => {
        var _l$children, _l$children2;
        return !l.get("isBaseLayer") && !((_l$children = l.children) !== null && _l$children !== void 0 && _l$children.length) && !((_l$children2 = l.children) !== null && _l$children2 !== void 0 && _l$children2.some(c => c.visible)) && !l.get("hideInLegend");
      }).map(l => l.key).reverse();
      if (isIframe) {
        // Apply base layers available
        const baseLayers = getLayersAsFlatArray(topic.layers || []).filter(l => l.get("isBaseLayer")).map(l => l.key);
        propConfig.find(p => p.name === "baselayers").values = baseLayers.length > 1 ? baseLayers : [];
        // Apply layers available
        propConfig.find(p => p.name === "layers").values = layers.length > 1 ? layers : [];
      } else {
        // Apply layers available (TODO: update visible layers dynamically in styleguide, currently crashes the app)
        propConfig.find(p => p.name === "layersVisibility").values = layers.length > 1 ? layers : [];
      }
      setPermalinkParams([...propConfig]);
    }
  }, [url, isIframe, propConfig]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.formWrapper
  }, propToggler ? /*#__PURE__*/React.createElement(Button, {
    disableRipple: true,
    onClick: () => togglePropsOpen(!propsOpen),
    className: classes.propToggler
  }, "PROPS & METHODS") : null, propsOpen ? /*#__PURE__*/React.createElement("table", {
    className: classes.table
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
    className: classes.colName
  }, "Name"), /*#__PURE__*/React.createElement("th", {
    className: classes.colDefault
  }, "Default"), /*#__PURE__*/React.createElement("th", {
    className: classes.colDescription
  }, "Description"), /*#__PURE__*/React.createElement("th", {
    className: classes.colSelected
  }, "Selected"))), /*#__PURE__*/React.createElement("tbody", null, permalinkParams.filter(filter).map(_ref2 => {
    let {
      name,
      type,
      defaultValue,
      values,
      description,
      comp,
      props,
      pathname
    } = _ref2;
    let currentValue = pathname ? url.pathname.split("/")[1] || "" : searchParams.get(name);
    const isSelectMultiple = comp === "select" && /Array/i.test(type);
    if (pathname) {
      currentValue = url.pathname.split("/")[1] || "";
    } else if (comp === "checkbox") {
      currentValue = currentValue === "true" || currentValue === true;
    } else if (comp === "select") {
      currentValue = searchParams.get(name);
      if (isSelectMultiple) {
        var _searchParams$get;
        currentValue = (_searchParams$get = searchParams.get(name)) === null || _searchParams$get === void 0 ? void 0 : _searchParams$get.split(",");
      }
      if (!currentValue && isSelectMultiple) {
        currentValue = [];
      }
      if (!currentValue) {
        currentValue = "";
      }
    } else if (comp === "input") {
      if (!currentValue) {
        currentValue = "";
      }
    }
    return /*#__PURE__*/React.createElement("tr", {
      key: name
    }, /*#__PURE__*/React.createElement("td", {
      className: classes.colName
    }, /*#__PURE__*/React.createElement("span", {
      className: "flex"
    }, name)), /*#__PURE__*/React.createElement("td", {
      className: classes.colDefault
    }, /*#__PURE__*/React.createElement("span", {
      className: "flex"
    }, defaultValue || "")), /*#__PURE__*/React.createElement("td", {
      className: classes.colDescription
    }, /*#__PURE__*/React.createElement("span", {
      className: "flex"
    }, description())), /*#__PURE__*/React.createElement("td", {
      className: classes.colSelected
    }, comp === "select" && /*#__PURE__*/React.createElement(FormControl, {
      variant: "standard"
    }, /*#__PURE__*/React.createElement(InputLabel, {
      id: "demo-mutiple-name-label"
    }, name), /*#__PURE__*/React.createElement(Select, {
      labelId: "demo-mutiple-name-label",
      multiple: /Array/i.test(type),
      value: currentValue,
      onChange: evt => {
        if (pathname) {
          url.pathname = "/".concat(evt.target.value);
        } else {
          const newValue = isSelectMultiple ? evt.target.value.join(",") : evt.target.value;
          if (newValue) {
            searchParams.set(name, newValue);
          } else {
            searchParams.delete(name);
          }
        }
        onChange(url.toString());
      },
      MenuProps: {
        disablePortal: true
      }
    }, values.map(val => /*#__PURE__*/React.createElement(MenuItem, {
      key: val,
      value: val,
      disabled: /\(disabled\)$/.test(val)
    }, val.replace(/\(disabled\)$/, ""))))), comp === "input" && /*#__PURE__*/React.createElement(TextField, _extends({
      variant: "standard",
      label: name,
      type: type,
      value: currentValue,
      onChange: evt => {
        if (evt.target.value) {
          searchParams.set(name, evt.target.value);
        } else {
          searchParams.delete(name);
        }
        onChange(url.toString());
      }
    }, props || {})), comp === "checkbox" && /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(FormControlLabel, {
      style: {
        marginTop: 16
      },
      control: /*#__PURE__*/React.createElement(Checkbox, _extends({
        checked: currentValue,
        onChange: evt => {
          if (evt.target.checked) {
            searchParams.set(name, evt.target.checked);
          } else {
            searchParams.delete(name);
          }
          onChange(url.toString());
        }
      }, props || {})),
      label: name
    }))));
  }))) : null);
}
DocForm.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  filter: PropTypes.func,
  isIframe: PropTypes.bool,
  propToggler: PropTypes.bool,
  propConfig: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
    type: PropTypes.string,
    comp: PropTypes.string,
    pathname: PropTypes.bool,
    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
    values: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.array, PropTypes.object]),
    description: PropTypes.func
  })).isRequired
};
export default DocForm;
//# sourceMappingURL=DocForm.js.map