"use strict";

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

var _preact = require("preact");

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

var _pills = _interopRequireDefault(require("../pills"));

var _button = require("../button");

var _description = require("./description");

var _tipBox = require("../tip-box");

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

const labelMap = {
  user: 'you',
  otherUser: 'other user',
  org: 'org',
  parentOrg: 'admin org'
};
const phraseMap = {
  otherUser: 'another user',
  org: 'your org',
  parentOrg: 'your admin org'
};

class MacroListItem extends _preact.Component {
  constructor(props) {
    super(props);

    this.toggleExpand = () => this.setState({
      expanded: !this.state.expanded
    });

    this.state = {
      expanded: false
    };
  }

  render() {
    const {
      id,
      name,
      ownerType,
      macro,
      canEdit,
      buttons,
      selectedIndex,
      selectable,
      onSelect
    } = this.props;
    const {
      expanded
    } = this.state;
    const owner = labelMap[ownerType];
    const selected = !!selectedIndex;
    return (0, _preact.h)("label", {
      className: (0, _classnames.default)('db br2 f6 mb2 pa2', selectedIndex ? 'bg-lightest-blue' : 'bg-near-white'),
      "data-e2e": "macroListItem",
      "data-id": id,
      "data-state": expanded ? 'expanded' : 'collapsed',
      "data-selected": selectedIndex
    }, (0, _preact.h)("div", {
      className: "flex items-center justify-between"
    }, (0, _preact.h)("div", {
      className: "pointer flex items-center justify-between"
    }, (0, _preact.h)("span", {
      class: "flex items-center"
    }, selectable && (0, _preact.h)("div", null, (0, _preact.h)("input", {
      type: "checkbox",
      className: "mr2 dn",
      checked: selected,
      onClick: () => onSelect(id)
    }), (0, _preact.h)("div", {
      className: (0, _classnames.default)('ba f6 br2 w1 h1 bw1 mr2 flex items-center justify-center f6 fw6', selected && 'bg-white'),
      style: {
        width: '20px',
        height: '20px'
      }
    }, selectedIndex > 0 ? selectedIndex : '')), (0, _preact.h)("span", {
      className: "fw6 mr2"
    }, name))), (0, _preact.h)("div", {
      className: "flex items-center"
    }, (0, _preact.h)("div", {
      className: "flex items-center mr2"
    }, "owner: \xA0", (0, _preact.h)(_pills.default, {
      "data-e2e": "macroOwnerPill",
      items: [ownerType === 'user' && {
        icon: 'face',
        text: owner
      }, ownerType === 'otherUser' && {
        icon: 'face',
        text: owner
      }, ownerType === 'org' && {
        icon: 'corporate_fare',
        text: owner
      }, ownerType === 'parentOrg' && {
        icon: 'admin_panel_settings',
        text: owner
      }].filter(Boolean),
      pillBgColor: "lightest-blue",
      pillTextColor: "dark-blue"
    })), (0, _preact.h)(_button.IconButton, {
      iconSize: "20",
      "data-e2e": "toggleMacroDetails",
      icon: expanded ? 'expand_less' : 'expand_more',
      onClick: this.toggleExpand
    }, expanded ? 'Hide' : 'Show', " Details"))), expanded && (0, _preact.h)("div", null, (0, _preact.h)(_description.MacroDescription, {
      macro: macro
    }), canEdit && buttons, !canEdit && (0, _preact.h)(_tipBox.TipBox, {
      className: "mt2"
    }, "You do not have permission to edit this preset. It is owned by", ' ', phraseMap[ownerType], ". However, you can still use it and you can choose which portions of it to apply to a case.")));
  }

}

exports.MacroListItem = MacroListItem;