"use strict";

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

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

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

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

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

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

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

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

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

var styles = function styles(theme) {
  return {
    container: {
      backgroundColor: _renderUi.color.defaults.WHITE,
      padding: theme.spacing.unit * 2,
      width: '355px',
      boxShadow: 'inset 0px 1px 5px 0px #9297A6',
      display: 'flex',
      flexDirection: 'column',
      gap: '16px'
    },
    row: {
      display: 'flex',
      alignItems: 'center',
      gap: '12px'
    },
    title: {
      fontSize: theme.typography.h6.fontSize,
      fontWeight: '700'
    },
    smallText: {
      marginLeft: '2px'
    },
    correctIcon: {
      backgroundColor: _renderUi.color.correct(),
      borderRadius: theme.spacing.unit * 2,
      color: _renderUi.color.defaults.WHITE
    },
    incorrectIcon: {
      backgroundColor: _renderUi.color.incorrectWithIcon(),
      borderRadius: theme.spacing.unit * 2,
      color: _renderUi.color.defaults.WHITE
    },
    lastRow: {
      marginLeft: '3px',
      display: 'flex',
      alignItems: 'center',
      gap: '12px'
    }
  };
};

var translator = _translator["default"].translator;

var KeyLegend = function KeyLegend(_ref) {
  var classes = _ref.classes,
      language = _ref.language;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.container
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.title
  }, "Key"), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
    className: classes.incorrectIcon
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.text
  }, translator.t('charting.keyLegend.incorrectAnswer', {
    lng: language
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row
  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
    className: classes.correctIcon
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.text
  }, translator.t('charting.keyLegend.correctAnswer', {
    lng: language
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.lastRow
  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
    className: classes.correctIcon,
    fontSize: 'small'
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.smallText
  }, translator.t('charting.keyLegend.correctKeyAnswer', {
    lng: language
  }))));
};

KeyLegend.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  language: _propTypes["default"].string
};

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

exports["default"] = _default;
//# sourceMappingURL=key-legend.js.map