"use strict";

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

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

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

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

var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));

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

var _translator = _interopRequireDefault(require("../translator"));

var translator = _translator["default"].translator;
var Legend = (0, _styles.withStyles)(function (theme) {
  return {
    flexContainer: {
      display: 'flex',
      flexDirection: 'row',
      gap: "".concat(2 * theme.spacing.unit, "px"),
      borderBottom: '1px solid lightgrey',
      borderTop: '1px solid lightgrey',
      paddingBottom: theme.spacing.unit,
      paddingTop: theme.spacing.unit,
      marginBottom: theme.spacing.unit
    },
    container: {
      display: 'flex',
      flexDirection: 'row',
      gap: "".concat(theme.spacing.unit / 2, "px"),
      alignItems: 'center'
    },
    correct: {
      fontSize: 'larger',
      color: _renderUi.color.correct(),
      backgroundColor: _renderUi.color.correctSecondary(),
      border: "2px solid ".concat(_renderUi.color.correct())
    },
    incorrect: {
      fontSize: 'larger',
      color: _renderUi.color.missing(),
      backgroundColor: _renderUi.color.incorrectSecondary(),
      border: "2px solid ".concat(_renderUi.color.missing())
    },
    missing: {
      fontSize: 'larger',
      color: _renderUi.color.missing(),
      backgroundColor: _renderUi.color.incorrectSecondary(),
      border: "2px dashed ".concat(_renderUi.color.missing())
    }
  };
})(function (_ref) {
  var classes = _ref.classes,
      language = _ref.language;
  var icons = [{
    iconName: _Check["default"],
    label: translator.t('selectText.correctAnswerSelected', {
      lng: language
    }),
    className: classes.correct
  }, {
    iconName: _Remove["default"],
    label: translator.t('selectText.correctAnswerNotSelected', {
      lng: language
    }),
    className: classes.missing
  }, {
    iconName: _Close["default"],
    label: translator.t('selectText.incorrectSelection', {
      lng: language
    }),
    className: classes.incorrect
  }];
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.flexContainer
  }, icons.map(function (icon, index) {
    var Icon = icon.iconName;
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      className: classes.container
    }, /*#__PURE__*/_react["default"].createElement(Icon, {
      className: icon.className,
      width: '19px',
      height: '19px'
    }), /*#__PURE__*/_react["default"].createElement("span", null, icon.label));
  }));
});
exports.Legend = Legend;
//# sourceMappingURL=legend.js.map