import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import ListItem from '@material-ui/core/ListItem';
import List from '@material-ui/core/List';
import Collapse from '@material-ui/core/Collapse';
import { UiLayout, color } from '@pie-lib/render-ui';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import debug from 'debug';
import { renderMath } from '@pie-lib/math-rendering';

const RubricType = PropTypes.shape({
  excludeZero: PropTypes.bool,
  points: PropTypes.arrayOf(PropTypes.string),
  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
  animationsDisabled: PropTypes.bool
});

class Rubric extends React.Component {
  constructor(props) {
    super(props);
    this.dudUrl = 'javascript:;';

    this.shouldRenderPoint = (index, value) => {
      if (!value.excludeZero) {
        return true;
      } else {
        return index !== 0;
      }
    };

    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,
      value,
      classes
    } = this.props;
    let {
      animationsDisabled
    } = this.props;
    animationsDisabled = animationsDisabled || value.animationsDisabled;

    if (value && value.points) {
      const {
        extraCSSRules
      } = model || {};
      const {
        points,
        sampleAnswers
      } = value;
      const rubricList = /*#__PURE__*/React.createElement(List, {
        component: "nav"
      }, points.slice(0).reverse().map((desc, index) => {
        index = points.length - index - 1;
        const pointsLabel = value.excludeZero ? index + 1 : index;
        return /*#__PURE__*/React.createElement(React.Fragment, {
          key: index
        }, /*#__PURE__*/React.createElement(ListItem, {
          key: `P${index}`,
          className: classes.listColumn
        }, /*#__PURE__*/React.createElement("h3", {
          className: classes.titleText
        }, pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`), /*#__PURE__*/React.createElement("div", {
          className: classes.text,
          dangerouslySetInnerHTML: {
            __html: desc
          }
        })), sampleAnswers && sampleAnswers[index] && /*#__PURE__*/React.createElement(ListItem, {
          key: `S${index}`,
          className: classes.listColumn
        }, /*#__PURE__*/React.createElement("h4", {
          className: classes.titleText,
          style: {
            fontWeight: 'normal'
          }
        }, "Sample Answer"), /*#__PURE__*/React.createElement("div", {
          className: classes.text,
          dangerouslySetInnerHTML: {
            __html: sampleAnswers[index]
          }
        })));
      }));
      return /*#__PURE__*/React.createElement(UiLayout, {
        extraCSSRules: extraCSSRules,
        className: classes.root
      }, /*#__PURE__*/React.createElement("h2", {
        className: classes.hiddenScreenReader
      }, "Rubric"), !animationsDisabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", {
        id: 'rubric-toggle',
        className: classes.rubricToggle,
        tabIndex: 0,
        role: "button",
        "aria-expanded": this.state.rubricOpen,
        onClick: this.toggleRubric,
        onKeyPress: e => {
          if (e.key === 'Enter' || e.key === ' ') this.toggleRubric();
        }
      }, this.state.linkPrefix, " Rubric", /*#__PURE__*/React.createElement("span", {
        className: classes.chevronStyle,
        "aria-hidden": "true"
      }, this.state.rubricOpen ? /*#__PURE__*/React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, /*#__PURE__*/React.createElement("polyline", {
        points: "18 15 12 9 6 15"
      })) : /*#__PURE__*/React.createElement("svg", {
        width: "20",
        height: "20",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
      }, /*#__PURE__*/React.createElement("polyline", {
        points: "6 9 12 15 18 9"
      })))), /*#__PURE__*/React.createElement(Collapse, {
        in: this.state.rubricOpen,
        timeout: "auto"
      }, rubricList)) : rubricList);
    } else {
      return null;
    }
  }

}

Rubric.propTypes = {
  classes: PropTypes.object.isRequired,
  model: PropTypes.object.isRequired,
  animationsDisabled: PropTypes.bool,
  value: RubricType
};

const styles = theme => ({
  root: {
    color: color.text(),
    backgroundColor: color.background(),
    // apply styles to tables to match the rest of the UI
    '&:not(.MathJax) table': {
      borderCollapse: 'collapse'
    },
    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
      padding: '8px 12px',
      textAlign: 'left'
    },
    // reset paragraph margins and line-height inside lists to override client styles
    '& ul p, & ol p': {
      marginBottom: 0,
      marginTop: 0,
      lineHeight: 'normal'
    }
  },
  listColumn: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    padding: '12px 0px'
  },
  listColumnItem: {
    padding: 0
  },
  text: {
    color: color.text()
  },
  titleText: {
    color: color.text(),
    fontSize: '16px',
    fontWeight: '700',
    margin: 0,
    paddingBottom: '6px'
  },
  rubricToggle: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
    userSelect: 'none',
    fontSize: theme.typography.fontSize,
    fontWeight: '500',
    color: color.tertiary(),
    margin: 0
  },
  chevronStyle: {
    display: 'inline-flex',
    transition: 'transform 0.2s',
    marginLeft: 2,
    alignSelf: 'center'
  },
  hiddenScreenReader: {
    position: 'absolute',
    width: '1px',
    height: '1px',
    padding: 0,
    margin: '-1px',
    overflow: 'hidden',
    clip: 'rect(0,0,0,0)',
    border: 0,
    whiteSpace: 'nowrap'
  }
});

var Rubric$1 = withStyles(styles)(Rubric);

class RubricRender extends HTMLElement {
  constructor() {
    super();
    debug.log('constructor called');
    this.onModelChanged = this.onModelChanged.bind(this);
  }

  set model(s) {
    this._model = s;

    this._render();
  }

  onModelChanged(m) {
    this._model = m;

    this._render();
  }

  connectedCallback() {
    this._render();
  }

  _render() {
    if (this._model) {
      const el = /*#__PURE__*/React.createElement(Rubric$1, {
        value: this._model
      });
      ReactDOM.render(el, this, () => {
        renderMath(this);
      });
    }
  }

}

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