"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _renderUi = require("../render-ui");

var _styles = require("@material-ui/core/styles");

var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));

var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));

var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));

var _configUi = require("../config-ui");

var _editableHtml = _interopRequireDefault(require("../editable-html"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var GridConfig = function GridConfig(props) {
  var classes = props.classes,
      disabled = props.disabled,
      displayedFields = props.displayedFields,
      labelValue = props.labelValue,
      labelValues = props.labelValues,
      gridValue = props.gridValue,
      gridValues = props.gridValues,
      _onChange = props.onChange;
  var _displayedFields$labe = displayedFields.labelStep,
      labelStep = _displayedFields$labe === void 0 ? {} : _displayedFields$labe,
      _displayedFields$step = displayedFields.step,
      step = _displayedFields$step === void 0 ? {} : _displayedFields$step;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.columnView
  }, step && step.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.mediumTextField,
    label: step.label || '',
    value: gridValue,
    customValues: gridValues,
    variant: "outlined",
    disabled: disabled,
    onChange: function onChange(e, v) {
      return _onChange('step', v);
    }
  }), labelStep && labelStep.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.mediumTextField,
    label: labelStep.label || '',
    value: labelValue,
    customValues: labelValues,
    variant: "outlined",
    disabled: disabled,
    onChange: function onChange(e, v) {
      return _onChange('labelStep', v);
    }
  }));
};

GridConfig.propTypes = {
  classes: _propTypes["default"].object,
  disabled: _propTypes["default"].bool,
  displayedFields: _propTypes["default"].object,
  labelValue: _propTypes["default"].number,
  labelValues: _propTypes["default"].array,
  gridValue: _propTypes["default"].number,
  gridValues: _propTypes["default"].array,
  onChange: _propTypes["default"].func
};

var AxisConfig = function AxisConfig(props) {
  var classes = props.classes,
      disabled = props.disabled,
      displayedFields = props.displayedFields,
      displayHeader = props.displayHeader,
      label = props.label,
      maxValue = props.maxValue,
      minValue = props.minValue,
      _onChange2 = props.onChange,
      type = props.type;
  var _displayedFields$axis = displayedFields.axisLabel,
      axisLabel = _displayedFields$axis === void 0 ? {} : _displayedFields$axis,
      _displayedFields$min = displayedFields.min,
      min = _displayedFields$min === void 0 ? {} : _displayedFields$min,
      _displayedFields$max = displayedFields.max,
      max = _displayedFields$max === void 0 ? {} : _displayedFields$max;
  var activePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
  ];
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.columnView
  }, displayHeader && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: "subtitle2"
  }, /*#__PURE__*/_react["default"].createElement("i", null, type === 'domain' ? 'x' : 'y'), "-axis"), min && min.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.mediumTextField,
    label: min.label || '',
    value: minValue,
    min: -10000,
    max: maxValue - 0.05,
    variant: "outlined",
    disabled: disabled,
    onChange: function onChange(e, v) {
      return _onChange2('min', v);
    }
  }), max && max.enabled && /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.mediumTextField,
    label: max.label || '',
    value: maxValue,
    min: minValue + 0.05,
    max: 10000,
    variant: "outlined",
    disabled: disabled,
    onChange: function onChange(e, v) {
      return _onChange2('max', v);
    }
  }), axisLabel && axisLabel.enabled && /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
    label: axisLabel.label || '',
    className: classes.mediumTextField
  }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
    className: classes.axisLabel,
    onChange: function onChange(value) {
      return _onChange2('axisLabel', value);
    },
    markup: label || '',
    charactersLimit: 5,
    activePlugins: activePlugins
  })));
};

AxisConfig.propTypes = {
  classes: _propTypes["default"].object,
  disabled: _propTypes["default"].bool,
  displayedFields: _propTypes["default"].object,
  displayHeader: _propTypes["default"].bool,
  label: _propTypes["default"].string,
  maxValue: _propTypes["default"].number,
  minValue: _propTypes["default"].number,
  type: _propTypes["default"].string,
  onChange: _propTypes["default"].func
};

var GridSetup = function GridSetup(props) {
  var classes = props.classes,
      domain = props.domain,
      _props$displayedField = props.displayedFields,
      displayedFields = _props$displayedField === void 0 ? {} : _props$displayedField,
      _props$gridValues = props.gridValues,
      gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
      includeAxes = props.includeAxes,
      _props$labelValues = props.labelValues,
      labelValues = _props$labelValues === void 0 ? {} : _props$labelValues,
      onChange = props.onChange,
      onChangeView = props.onChangeView,
      range = props.range,
      size = props.size,
      sizeConstraints = props.sizeConstraints,
      standardGrid = props.standardGrid;
  var gridProps = {
    min: 2,
    max: 41
  };

  var _ref = displayedFields || {},
      _ref$axisLabel = _ref.axisLabel,
      axisLabel = _ref$axisLabel === void 0 ? {} : _ref$axisLabel,
      dimensionsEnabled = _ref.dimensionsEnabled,
      includeAxesEnabled = _ref.includeAxesEnabled,
      _ref$labelStep = _ref.labelStep,
      labelStep = _ref$labelStep === void 0 ? {} : _ref$labelStep,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? {} : _ref$min,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? {} : _ref$max,
      standardGridEnabled = _ref.standardGridEnabled,
      _ref$step = _ref.step,
      step = _ref$step === void 0 ? {} : _ref$step;

  var displayAxisType = min.enabled || max.enabled || axisLabel.enabled || step.enabled || labelStep.enabled;
  var gridConfigFields = {
    step: step,
    labelStep: labelStep
  };
  var axisConfigFields = {
    min: min,
    max: max,
    axisLabel: axisLabel
  };

  var onIncludeAxes = function onIncludeAxes(includeAxes) {
    var noAxesConfig = function noAxesConfig(type) {
      var axis = type === 'domain' ? domain : range;
      return {
        min: 1,
        max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,
        step: 1,
        labelStep: 0
      };
    };

    var updatedRange = _objectSpread(_objectSpread({}, range), includeAxes ? {
      labelStep: 1
    } : noAxesConfig('range'));

    var updatedDomain = _objectSpread(_objectSpread({}, domain), includeAxes ? {
      labelStep: 1
    } : noAxesConfig('domain'));

    onChange({
      includeAxes: includeAxes,
      range: updatedRange,
      domain: updatedDomain
    });
  };

  var onStandardGridChanged = function onStandardGridChanged(value) {
    onChange({
      standardGrid: value,
      range: _objectSpread(_objectSpread({}, domain), {}, {
        axisLabel: range.axisLabel
      }),
      graph: _objectSpread(_objectSpread({}, size), {}, {
        height: size.width
      })
    });
  };

  var onSizeChanged = function onSizeChanged(key, value) {
    var graph = _objectSpread(_objectSpread({}, size), {}, (0, _defineProperty2["default"])({}, key, value));

    if (standardGrid) {
      graph.height = value;
    }

    onChange({
      graph: graph
    });
  };

  var onDomainChanged = function onDomainChanged(key, value) {
    domain[key] = value;

    if (standardGrid && key !== 'axisLabel') {
      range[key] = value;
    }

    onChange({
      domain: domain,
      range: range
    });
  };

  var onRangeChanged = function onRangeChanged(key, value) {
    range[key] = value;
    onChange({
      range: range
    });
  };

  var axesConfig = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.rowView
  }, /*#__PURE__*/_react["default"].createElement(AxisConfig, {
    classes: classes,
    displayedFields: axisConfigFields,
    displayHeader: displayAxisType,
    type: "domain",
    minValue: domain.min,
    maxValue: domain.max,
    label: domain.axisLabel,
    includeAxes: includeAxes,
    onChange: onDomainChanged
  }), /*#__PURE__*/_react["default"].createElement(AxisConfig, {
    classes: classes,
    displayedFields: axisConfigFields,
    displayHeader: displayAxisType,
    type: "range",
    minValue: range.min,
    maxValue: range.max,
    label: range.axisLabel,
    disabled: standardGrid,
    includeAxes: includeAxes,
    onChange: onRangeChanged
  })), (min.enabled || max.enabled) && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: classes.text
  }, "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value"), (step.enabled || labelStep.enabled) && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.rowView
  }, /*#__PURE__*/_react["default"].createElement(GridConfig, {
    classes: classes,
    displayedFields: gridConfigFields,
    gridValue: domain.step,
    labelValue: domain.labelStep,
    gridValues: gridValues.domain || [],
    labelValues: labelValues.domain || [],
    onChange: onDomainChanged
  }), /*#__PURE__*/_react["default"].createElement(GridConfig, {
    classes: classes,
    disabled: standardGrid,
    displayedFields: gridConfigFields,
    gridValue: range.step,
    labelValue: range.labelStep,
    gridValues: gridValues.range || [],
    labelValues: labelValues.range || [],
    onChange: onRangeChanged
  })), labelStep.enabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: classes.text
  }, "For unnumbered gridlines, enter a label interval of 0"));

  var gridlinesConfig = max.enabled ? /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.columnView
  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.largeTextField,
    label: "Number of Vertical Gridlines",
    value: domain.max,
    min: !includeAxes && gridProps.min,
    max: !includeAxes && gridProps.max,
    variant: "outlined",
    onChange: function onChange(e, v) {
      return onDomainChanged('max', v);
    }
  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.largeTextField,
    label: "Number of Horizontal Gridlines",
    value: range.max,
    min: !includeAxes && gridProps.min,
    max: !includeAxes && gridProps.max,
    variant: "outlined",
    disabled: standardGrid,
    onChange: function onChange(e, v) {
      return onRangeChanged('max', v);
    }
  })) : null;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.wrapper
  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], {
    onChange: onChangeView
  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
    expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null)
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: "subtitle1"
  }, "Customize Grid Setup")), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.content
  }, includeAxesEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.Toggle, {
    label: "Include axes and labels?",
    toggle: onIncludeAxes,
    checked: includeAxes
  }), standardGridEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.Toggle, {
    label: "Constrain to standard coordinate grid?",
    toggle: onStandardGridChanged,
    checked: standardGrid
  }), includeAxes ? axesConfig : gridlinesConfig, dimensionsEnabled && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.dimensions
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Dimensions(px)"), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: classes.disabled
  }, "Min ", sizeConstraints.min, ", Max ", sizeConstraints.max)), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.textField,
    label: "Width",
    value: size.width,
    min: sizeConstraints.min,
    max: sizeConstraints.max,
    step: sizeConstraints.step,
    variant: "outlined",
    onChange: function onChange(e, v) {
      return onSizeChanged('width', v);
    }
  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
    className: classes.textField,
    label: "Height",
    value: size.height,
    min: sizeConstraints.min,
    max: sizeConstraints.max,
    step: sizeConstraints.step,
    variant: "outlined",
    disabled: standardGrid,
    onChange: function onChange(e, v) {
      return onSizeChanged('height', v);
    }
  }))))));
};

GridSetup.propTypes = {
  classes: _propTypes["default"].object,
  domain: _propTypes["default"].object,
  displayedFields: _propTypes["default"].object,
  gridValues: _propTypes["default"].object,
  includeAxes: _propTypes["default"].bool,
  labelValues: _propTypes["default"].object,
  onChange: _propTypes["default"].func,
  onChangeView: _propTypes["default"].func,
  range: _propTypes["default"].object,
  size: _propTypes["default"].object,
  sizeConstraints: _propTypes["default"].object,
  standardGrid: _propTypes["default"].bool
};

var styles = function styles(theme) {
  return {
    wrapper: {
      width: '450px'
    },
    content: {
      display: 'flex',
      flexDirection: 'column',
      width: '100%'
    },
    columnView: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },
    rowView: {
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'center'
    },
    textField: {
      width: '130px',
      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
    },
    mediumTextField: {
      width: '160px',
      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
    },
    largeTextField: {
      width: '230px',
      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
    },
    text: {
      fontStyle: 'italic',
      margin: "".concat(theme.spacing.unit, "px 0")
    },
    dimensions: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center'
    },
    disabled: {
      color: _renderUi.color.disabled()
    },
    axisLabel: {
      paddingTop: theme.spacing.unit * 2
    }
  };
};

var _default = (0, _styles.withStyles)(styles)(GridSetup);

exports["default"] = _default;
//# sourceMappingURL=grid-setup.js.map