import React from 'react';
import ReactDOM from 'react-dom';
import { ModelSetEvent } from '@pie-framework/pie-player-events';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { color, UiLayout } from '@pie-lib/render-ui';
import require$$3 from '@material-ui/core/SvgIcon';
import Link from '@material-ui/core/Link';
import Collapse from '@material-ui/core/Collapse';
import { renderMath } from '@pie-lib/math-rendering';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

const styles$1 = () => ({
  trait: {
    '&$traitName': {
      color: color.primaryDark(),
      verticalAlign: 'middle'
    }
  },
  noDescription: {
    color: color.secondaryBackground(),
    textAlign: 'center'
  },
  traitName: {}
});

const Trait = props => {
  const {
    trait,
    traitIndex,
    scaleIndex,
    showStandards,
    showDescription,
    scorePointsValues,
    classes
  } = props;
  const {
    name,
    standards,
    scorePointsDescriptors,
    description
  } = trait || {};
  return /*#__PURE__*/React.createElement("tr", {
    key: `scale-${scaleIndex}-trait-${traitIndex}`
  }, /*#__PURE__*/React.createElement("td", {
    className: `${classes.trait} ${classes.traitName}`
  }, /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: name
    }
  })), showStandards ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: standards.join(',')
    }
  })) : null, showDescription ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: description
    }
  })) : null, scorePointsValues && scorePointsValues.map((scorePointValue, index) => {
    let scoreDescriptor;

    try {
      scoreDescriptor = scorePointsDescriptors[scorePointsValues.length - index - 1] || '';
    } catch (e) {
      scoreDescriptor = '';
    }

    return /*#__PURE__*/React.createElement("td", {
      key: `table-cell-${index}`
    }, /*#__PURE__*/React.createElement("div", {
      className: !scoreDescriptor ? classes.noDescription : '',
      dangerouslySetInnerHTML: {
        __html: scoreDescriptor || 'No Description'
      }
    }));
  }));
};

Trait.propTypes = {
  classes: PropTypes.object,
  showStandards: PropTypes.bool,
  showDescription: PropTypes.bool,
  scorePointsValues: PropTypes.arrayOf(PropTypes.number),
  scaleIndex: PropTypes.number,
  traitIndex: PropTypes.number,
  trait: PropTypes.shape({
    name: PropTypes.string,
    standards: PropTypes.arrayOf(PropTypes.string),
    scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
    description: PropTypes.string
  })
};
var Trait$1 = withStyles(styles$1)(Trait);

var ArrowBackIos = {};

var interopRequireDefault = {exports: {}};

(function (module) {
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    "default": obj
  };
}

module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
}(interopRequireDefault));

var createSvgIcon$1 = {};

var pure$1 = {};

var shouldUpdate$1 = {};

var inheritsLoose = {exports: {}};

var setPrototypeOf = {exports: {}};

(function (module) {
function _setPrototypeOf(o, p) {
  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
  return _setPrototypeOf(o, p);
}

module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
}(setPrototypeOf));

(function (module) {
var setPrototypeOf$1 = setPrototypeOf.exports;

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  setPrototypeOf$1(subClass, superClass);
}

module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
}(inheritsLoose));

var setDisplayName$1 = {};

var setStatic$1 = {};

setStatic$1.__esModule = true;
setStatic$1.default = void 0;

var setStatic = function setStatic(key, value) {
  return function (BaseComponent) {
    /* eslint-disable no-param-reassign */
    BaseComponent[key] = value;
    /* eslint-enable no-param-reassign */

    return BaseComponent;
  };
};

var _default$9 = setStatic;
setStatic$1.default = _default$9;

var _interopRequireDefault$7 = interopRequireDefault.exports;

setDisplayName$1.__esModule = true;
setDisplayName$1.default = void 0;

var _setStatic = _interopRequireDefault$7(setStatic$1);

var setDisplayName = function setDisplayName(displayName) {
  return (0, _setStatic.default)('displayName', displayName);
};

var _default$8 = setDisplayName;
setDisplayName$1.default = _default$8;

var wrapDisplayName$1 = {};

var getDisplayName$1 = {};

getDisplayName$1.__esModule = true;
getDisplayName$1.default = void 0;

var getDisplayName = function getDisplayName(Component) {
  if (typeof Component === 'string') {
    return Component;
  }

  if (!Component) {
    return undefined;
  }

  return Component.displayName || Component.name || 'Component';
};

var _default$7 = getDisplayName;
getDisplayName$1.default = _default$7;

var _interopRequireDefault$6 = interopRequireDefault.exports;

wrapDisplayName$1.__esModule = true;
wrapDisplayName$1.default = void 0;

var _getDisplayName = _interopRequireDefault$6(getDisplayName$1);

var wrapDisplayName = function wrapDisplayName(BaseComponent, hocName) {
  return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
};

var _default$6 = wrapDisplayName;
wrapDisplayName$1.default = _default$6;

var _interopRequireDefault$5 = interopRequireDefault.exports;

shouldUpdate$1.__esModule = true;
shouldUpdate$1.default = void 0;

var _inheritsLoose2 = _interopRequireDefault$5(inheritsLoose.exports);

var _react$3 = React;

var _setDisplayName$1 = _interopRequireDefault$5(setDisplayName$1);

var _wrapDisplayName$1 = _interopRequireDefault$5(wrapDisplayName$1);

var shouldUpdate = function shouldUpdate(test) {
  return function (BaseComponent) {
    var factory = (0, _react$3.createFactory)(BaseComponent);

    var ShouldUpdate =
    /*#__PURE__*/
    function (_Component) {
      (0, _inheritsLoose2.default)(ShouldUpdate, _Component);

      function ShouldUpdate() {
        return _Component.apply(this, arguments) || this;
      }

      var _proto = ShouldUpdate.prototype;

      _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
        return test(this.props, nextProps);
      };

      _proto.render = function render() {
        return factory(this.props);
      };

      return ShouldUpdate;
    }(_react$3.Component);

    if (process.env.NODE_ENV !== 'production') {
      return (0, _setDisplayName$1.default)((0, _wrapDisplayName$1.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
    }

    return ShouldUpdate;
  };
};

var _default$5 = shouldUpdate;
shouldUpdate$1.default = _default$5;

var shallowEqual$1 = {};

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @typechecks
 * 
 */

var hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * inlined Object.is polyfill to avoid requiring consumers ship their own
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
function is(x, y) {
  // SameValue algorithm
  if (x === y) {
    // Steps 1-5, 7-10
    // Steps 6.b-6.e: +0 != -0
    // Added the nonzero y check to make Flow happy, but it is redundant
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    // Step 6.a: NaN == NaN
    return x !== x && y !== y;
  }
}

/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA, objB) {
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }

  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (var i = 0; i < keysA.length; i++) {
    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  }

  return true;
}

var shallowEqual_1 = shallowEqual;

var _interopRequireDefault$4 = interopRequireDefault.exports;

shallowEqual$1.__esModule = true;
shallowEqual$1.default = void 0;

var _shallowEqual$1 = _interopRequireDefault$4(shallowEqual_1);

var _default$4 = _shallowEqual$1.default;
shallowEqual$1.default = _default$4;

var _interopRequireDefault$3 = interopRequireDefault.exports;

pure$1.__esModule = true;
pure$1.default = void 0;

var _shouldUpdate = _interopRequireDefault$3(shouldUpdate$1);

var _shallowEqual = _interopRequireDefault$3(shallowEqual$1);

var _setDisplayName = _interopRequireDefault$3(setDisplayName$1);

var _wrapDisplayName = _interopRequireDefault$3(wrapDisplayName$1);

var pure = function pure(BaseComponent) {
  var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
    return !(0, _shallowEqual.default)(props, nextProps);
  });

  if (process.env.NODE_ENV !== 'production') {
    return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
  }

  return hoc(BaseComponent);
};

var _default$3 = pure;
pure$1.default = _default$3;

var _interopRequireDefault$2 = interopRequireDefault.exports;

Object.defineProperty(createSvgIcon$1, "__esModule", {
  value: true
});
createSvgIcon$1.default = void 0;

var _react$2 = _interopRequireDefault$2(React);

var _pure = _interopRequireDefault$2(pure$1);

var _SvgIcon = _interopRequireDefault$2(require$$3);

function createSvgIcon(path, displayName) {
  var Icon = function Icon(props) {
    return _react$2.default.createElement(_SvgIcon.default, props, path);
  };

  Icon.displayName = "".concat(displayName, "Icon");
  Icon = (0, _pure.default)(Icon);
  Icon.muiName = 'SvgIcon';
  return Icon;
}
var _default$2 = createSvgIcon;
createSvgIcon$1.default = _default$2;

var _interopRequireDefault$1 = interopRequireDefault.exports;

Object.defineProperty(ArrowBackIos, "__esModule", {
  value: true
});
var default_1$1 = ArrowBackIos.default = void 0;

var _react$1 = _interopRequireDefault$1(React);

var _createSvgIcon$1 = _interopRequireDefault$1(createSvgIcon$1);

var _default$1 = (0, _createSvgIcon$1.default)(_react$1.default.createElement(_react$1.default.Fragment, null, _react$1.default.createElement("path", {
  d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"
}), _react$1.default.createElement("path", {
  fill: "none",
  d: "M0 0h24v24H0z"
})), 'ArrowBackIos');

default_1$1 = ArrowBackIos.default = _default$1;

var ArrowForwardIos = {};

var _interopRequireDefault = interopRequireDefault.exports;

Object.defineProperty(ArrowForwardIos, "__esModule", {
  value: true
});
var default_1 = ArrowForwardIos.default = void 0;

var _react = _interopRequireDefault(React);

var _createSvgIcon = _interopRequireDefault(createSvgIcon$1);

var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
  d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"
}), _react.default.createElement("path", {
  fill: "none",
  d: "M0 0h24v24H0z"
})), 'ArrowForwardIos');

default_1 = ArrowForwardIos.default = _default;

const styles = theme => ({
  wrapper: {
    display: 'flex',
    position: 'relative'
  },
  tableWrapper: {
    width: '100%',
    overflow: 'auto'
  },
  table: {
    borderSpacing: 0,
    marginBottom: theme.spacing.unit * 2,
    borderRadius: '4px',
    color: color.text(),
    fontSize: theme.typography.fontSize,
    lineHeight: '16px',
    overflow: 'unset',
    '& ul, ol': {
      marginBlockStart: 0,
      paddingInlineStart: theme.spacing.unit * 2
    },
    '& th': {
      padding: theme.spacing.unit * 2,
      textAlign: 'left',
      backgroundColor: color.secondaryBackground(),
      verticalAlign: 'bottom'
    },
    '& th div': {
      width: '200px'
    },
    '& td': {
      width: '200px',
      padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
      verticalAlign: 'top'
    }
  },
  scorePointHeader: {
    '& td': {
      border: 0,
      padding: 0,
      textAlign: 'center',
      minWidth: '200px'
    }
  },
  pointLabel: {
    marginBottom: '4px'
  },
  scorePointValue: {
    fontWeight: 'normal'
  }
});

const ArrowContainer = ({
  show,
  onClick,
  extraStyles,
  children
}) => /*#__PURE__*/React.createElement("div", {
  style: _extends({
    height: 'calc(100% - 1px)',
    top: '1px',
    display: show ? 'flex' : 'none',
    width: '50px',
    margin: 'auto',
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer'
  }, extraStyles),
  onClick: onClick
}, children);

ArrowContainer.propTypes = {
  show: PropTypes.bool,
  onClick: PropTypes.func,
  extraStyles: PropTypes.object,
  children: PropTypes.object
};

class Scale extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {};

    this.scrollLeft = () => {
      this.tableWrapper.scrollLeft -= this.tableWrapper.offsetWidth / 2;
      this.setState({
        showRight: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
        showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
      });
    };

    this.scrollRight = () => {
      const initialScrollLeft = this.tableWrapper.scrollLeft;
      this.tableWrapper.scrollLeft += this.tableWrapper.offsetWidth / 2;
      this.setState({
        showRight: initialScrollLeft !== this.tableWrapper.scrollLeft && this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
        showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
      });
    };
  }

  componentDidMount() {
    if (this.tableWrapper) {
      if (this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth) {
        this.setState({
          showRight: true
        });
      }
    }
  }

  render() {
    const {
      showRight,
      showLeft
    } = this.state;
    const {
      classes,
      scale,
      scaleIndex,
      showDescription,
      showPointsLabels,
      showStandards,
      arrowsDisabled
    } = this.props;
    const {
      excludeZero,
      maxPoints,
      traitLabel,
      traits,
      scorePointsLabels
    } = scale || {};
    let scorePointsValues = [];
    let descriptions;
    let pointsLabels;
    let standards;

    try {
      // determining the score points values
      for (let pointValue = maxPoints; pointValue >= excludeZero ? 1 : 0; pointValue -= 1) {
        scorePointsValues.push(pointValue);
      }

      const {
        traitStandards,
        traitDescriptions
      } = traits.reduce((tcc, trait) => ({
        traitStandards: [...tcc.traitStandards, ...(trait.standards || [])],
        traitDescriptions: [...tcc.traitDescriptions, ...(trait.description || [])]
      }), {
        traitStandards: [],
        traitDescriptions: []
      });
      descriptions = showDescription && traitDescriptions.length;
      pointsLabels = showPointsLabels && scorePointsLabels.length;
      standards = showStandards && traitStandards.length;
    } catch (e) {
      descriptions = false;
      pointsLabels = false;
      standards = false;
    }

    return /*#__PURE__*/React.createElement("div", {
      className: classes.wrapper
    }, /*#__PURE__*/React.createElement(ArrowContainer, {
      show: showLeft && !arrowsDisabled,
      onClick: this.scrollLeft,
      extraStyles: {
        left: 0,
        background: `linear-gradient(to right, white, ${color.background()})`
      }
    }, /*#__PURE__*/React.createElement(default_1$1, null)), /*#__PURE__*/React.createElement("div", {
      className: classes.tableWrapper,
      ref: ref => {
        this.tableWrapper = ref;
      },
      onScroll: () => {
        this.setState({
          // 5 is a margin of error
          showRight: this.tableWrapper.scrollLeft + this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth - 5 && this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
          showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
        });
      }
    }, arrowsDisabled && (showRight || showLeft) ? /*#__PURE__*/React.createElement("div", null, "The item is too large to fit in print mode.") : null, /*#__PURE__*/React.createElement("table", {
      key: `scale-${scaleIndex}`,
      className: classes.table
    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("div", {
      dangerouslySetInnerHTML: {
        __html: traitLabel
      }
    })), standards ? /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("div", null, "Standard(s)")) : null, descriptions ? /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("div", null, "Description")) : null, scorePointsValues && scorePointsValues.map((scorePointValue, index) => {
      let pointLabel = ''; // to handle the case when there aren't enough labels

      try {
        pointLabel = scorePointsLabels[scorePointsValues.length - index - 1] || '';
      } catch (e) {
        pointLabel = '';
      }

      return /*#__PURE__*/React.createElement("th", {
        key: `table-header-${index}`
      }, /*#__PURE__*/React.createElement("table", {
        className: classes.scorePointHeader
      }, /*#__PURE__*/React.createElement("thead", null, pointsLabels ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
        className: classes.pointLabel,
        dangerouslySetInnerHTML: {
          __html: pointLabel
        }
      }))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
        className: classes.scorePointValue
      }, scorePointValue === 1 ? `${scorePointValue} point` : `${scorePointValue} points`)))));
    }))), /*#__PURE__*/React.createElement("tbody", null, traits && traits.map((trait, traitIndex) => /*#__PURE__*/React.createElement(Trait$1, {
      key: `trait_${scaleIndex}_${traitIndex}`,
      trait: trait,
      traitIndex: traitIndex,
      showDescription: !!descriptions,
      showStandards: !!standards,
      scaleIndex: scaleIndex,
      scorePointsValues: scorePointsValues,
      excludeZero: excludeZero
    }))))), /*#__PURE__*/React.createElement(ArrowContainer, {
      show: showRight && !arrowsDisabled,
      onClick: this.scrollRight,
      extraStyles: {
        right: 0,
        background: `linear-gradient(to left, white, ${color.background()})`
      }
    }, /*#__PURE__*/React.createElement(default_1, null)));
  }

}

Scale.propTypes = {
  classes: PropTypes.object,
  scaleIndex: PropTypes.number,
  scale: PropTypes.shape({
    excludeZero: PropTypes.bool,
    maxPoints: PropTypes.number,
    scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
    traitLabel: PropTypes.string,
    traits: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string,
      standards: PropTypes.arrayOf(PropTypes.string),
      scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
      description: PropTypes.string
    }))
  }),
  showPointsLabels: PropTypes.bool,
  showDescription: PropTypes.bool,
  showStandards: PropTypes.bool,
  arrowsDisabled: PropTypes.bool
};
var Scale$1 = withStyles(styles)(Scale);

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rubricOpen: false,
      linkPrefix: 'Show'
    };
    this.toggleRubric = this.toggleRubric.bind(this);
  }

  toggleRubric() {
    this.setState({
      rubricOpen: !this.state.rubricOpen
    });
    this.setState({
      linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide'
    });
  }

  render() {
    const {
      model
    } = this.props;
    let {
      animationsDisabled
    } = this.props;
    const {
      extraCSSRules,
      halfScoring,
      scales,
      visible,
      pointLabels,
      description,
      standards,
      arrowsDisabled
    } = model || {};
    animationsDisabled = animationsDisabled || model.animationsDisabled;

    if (!scales || !visible) {
      return null;
    }

    const rubricItem = /*#__PURE__*/React.createElement(UiLayout, {
      extraCSSRules: extraCSSRules,
      style: {
        fontFamily: 'Cerebri Sans',
        color: color.text(),
        backgroundColor: color.background()
      }
    }, halfScoring ? /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: '16px'
      }
    }, "* Half-point or in-between scores are permitted under this rubric.") : null, scales.map((scale, scaleIndex) => /*#__PURE__*/React.createElement(Scale$1, {
      key: `scale_${scaleIndex}`,
      scale: scale,
      scaleIndex: scaleIndex,
      showPointsLabels: pointLabels,
      showDescription: description,
      showStandards: standards,
      arrowsDisabled: arrowsDisabled
    })));

    if (animationsDisabled) {
      return rubricItem;
    }

    return /*#__PURE__*/React.createElement(UiLayout, {
      extraCSSRules: extraCSSRules,
      style: {
        color: color.text(),
        backgroundColor: color.background()
      }
    }, /*#__PURE__*/React.createElement(Link, {
      style: {
        backgroundColor: color.background()
      },
      href: this.dudUrl,
      onClick: this.toggleRubric
    }, this.state.linkPrefix, " Rubric"), /*#__PURE__*/React.createElement(Collapse, {
      style: {
        marginTop: '16px'
      },
      in: this.state.rubricOpen,
      timeout: "auto"
    }, rubricItem));
  }

}

Main.propTypes = {
  model: PropTypes.shape({
    halfScoring: PropTypes.bool,
    scales: PropTypes.arrayOf(PropTypes.shape({
      excludeZero: PropTypes.bool,
      maxPoints: PropTypes.number,
      scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
      traitLabel: PropTypes.string,
      traits: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string,
        description: PropTypes.string,
        scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
        standards: PropTypes.arrayOf(PropTypes.string)
      }))
    })),
    visible: PropTypes.bool,
    pointLabels: PropTypes.bool,
    description: PropTypes.bool,
    standards: PropTypes.bool,
    animationsDisabled: PropTypes.bool
  }),
  animationsDisabled: PropTypes.bool
};

class MultiTraitRubric extends HTMLElement {
  constructor() {
    super();
    this._model = {};
    this._session = null;
  }

  set model(s) {
    this._model = s;
    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this._session, !!this._model));

    this._render();
  }

  set session(s) {
    this._session = s;
  }

  get session() {
    return this._session;
  }

  connectedCallback() {
    this._render();
  }

  _render() {
    const el = /*#__PURE__*/React.createElement(Main, {
      model: this._model,
      session: this._session
    });
    ReactDOM.render(el, this, () => {
      renderMath(this);
    });
  }

}

export { MultiTraitRubric as default };
//# sourceMappingURL=element.js.map
