"use strict";

exports.__esModule = true;
exports.default = TagChip;

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

var _Chip = _interopRequireDefault(require("@mui/material/Chip"));

var _classnames = _interopRequireDefault(require("classnames"));

var _styles = require("@mui/material/styles");

const _excluded = ["tag", "label", "ellipsis", "onClick", "onDelete", "className"];

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

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); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

const PREFIX = 'SCTagChip';
const classes = {
  ellipsis: `${PREFIX}-ellipsis`
};
const Root = (0, _styles.styled)(_Chip.default, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => [styles.root]
})(({
  theme
}) => ({
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  [`&.${classes.ellipsis}`]: {
    maxWidth: 120
  }
}));

function TagChip(props) {
  // PROPS
  const {
    tag,
    label = null,
    ellipsis = false,
    onClick = null,
    onDelete = null,
    className = null
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // HANDLERS


  const handleClick = () => {
    onClick && onClick(tag.id);
  };

  const handleDelete = () => {
    onDelete && onDelete(tag.id);
  };
  /**
   * Renders root object
   */


  return /*#__PURE__*/_react.default.createElement(Root, _extends({
    className: (0, _classnames.default)(className, {
      [classes.ellipsis]: ellipsis
    }),
    sx: {
      backgroundColor: `${tag.color}`,
      color: theme => theme.palette.getContrastText(tag.color)
    },
    onClick: handleClick,
    onDelete: handleDelete,
    label: label ? label : tag.name
  }, rest));
}