import React from "react";
import PropTypes from "prop-types";
import includes from "lodash-es/includes";
import cloneDeep from "lodash-es/cloneDeep";
import remove from "lodash-es/remove";
import Checkbox from "../Checkbox";
import ChevronRight from "../Icon/ChevronRight";
import ChevronDown from "../Icon/ChevronDown";
import Typography from "../Typography";
import getClasses from "./styles";

var CheckboxTree = function CheckboxTree(props) {
  var classes = getClasses();
  var nodes = props.nodes,
      className = props.className,
      checked = props.checked,
      expanded = props.expanded;
  var onExpand = props.onExpand,
      onCheck = props.onCheck;

  var handleExpand = function handleExpand(value) {
    var expandedAux = cloneDeep(expanded);

    if (includes(expanded, value)) {
      remove(expandedAux, function (n) {
        return n === value;
      });
      onExpand(expandedAux);
    } else {
      expandedAux.push(value);
      onExpand(expandedAux);
    }
  };

  var handleCheck = function handleCheck(value) {
    var checkedAux = cloneDeep(checked);

    if (includes(checked, value)) {
      remove(checkedAux, function (n) {
        return n === value;
      });
      onCheck(checkedAux);
    } else {
      checkedAux.push(value);
      onCheck(checkedAux);
    }
  };

  var printChild = function printChild(nodesList) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, nodesList.map(function (_ref) {
      var label = _ref.label,
          value = _ref.value,
          children = _ref.children;
      var isExpanded = includes(expanded, value);
      var isChecked = includes(checked, value);
      return /*#__PURE__*/React.createElement("div", {
        key: "checkbox-tree-".concat(value)
      }, !children ? /*#__PURE__*/React.createElement("div", {
        className: classes.item
      }, /*#__PURE__*/React.createElement(Checkbox, {
        className: classes.checkbox,
        checked: isChecked,
        onChange: function onChange() {
          return handleCheck(value);
        }
      }, /*#__PURE__*/React.createElement(Typography, {
        variant: "f1-14",
        shade: 800
      }, label))) : /*#__PURE__*/React.createElement("button", {
        type: "button",
        className: classes.parent,
        onClick: function onClick() {
          return handleExpand(value);
        }
      }, isExpanded ? /*#__PURE__*/React.createElement(ChevronDown, {
        shade: 800
      }) : /*#__PURE__*/React.createElement(ChevronRight, {
        shade: 800
      }), /*#__PURE__*/React.createElement(Typography, {
        variant: "f1-14",
        shade: 800
      }, label)), !!children && /*#__PURE__*/React.createElement("div", {
        className: !isExpanded ? classes.hide : classes.children
      }, printChild(children)));
    }));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, printChild(nodes));
};

CheckboxTree.propTypes = {
  nodes: PropTypes.instanceOf(Array),
  checked: PropTypes.instanceOf(Array),
  expanded: PropTypes.instanceOf(Array),
  className: PropTypes.string,
  onCheck: PropTypes.func,
  onExpand: PropTypes.func
};
CheckboxTree.defaultProps = {
  nodes: [],
  className: "",
  expanded: [],
  checked: [],
  onCheck: function onCheck() {},
  onExpand: function onExpand() {}
};
export default CheckboxTree;