"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("@material-ui/core/styles");
var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var useStyles = (0, _styles.makeStyles)(function () {
  return {
    arrow: {
      display: 'table-cell',
      verticalAlign: 'middle',
      paddingLeft: 20
    },
    button: {
      display: 'table'
    },
    label: {},
    option: {
      display: 'table-cell',
      verticalAlign: 'middle',
      width: '88%',
      '&.selected': {},
      '& .fastconfiguration-option': {
        display: 'flex'
      }
    },
    root: {
      display: 'table-cell',
      verticalAlign: 'middle',
      cursor: 'pointer'
    }
  };
}, {
  name: 'SelectableRow'
});
var SelectableRow = function SelectableRow(_ref) {
  var label = _ref.label,
    selectedOption = _ref.selectedOption,
    showSelected = _ref.showSelected,
    closeDialog = _ref.closeDialog,
    renderValue = _ref.renderValue,
    toggleDialog = _ref.toggleDialog,
    onFocus = _ref.onFocus,
    onOptionRendered = _ref.onOptionRendered;
  var classes = useStyles();
  var onProductPartClicked = function onProductPartClicked() {
    toggleDialog();
    onFocus();
  };
  var renderArrow = function renderArrow() {
    return /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], {
      className: classes.arrow
    });
  };
  var renderOption = function renderOption(option, key) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.option,
      key: key,
      "data-option": option.identifier,
      onClick: closeDialog
    }, onOptionRendered ? onOptionRendered(option) : option.title);
  };
  var renderComponent = function renderComponent() {
    var topElement = null;
    if (showSelected) {
      if (selectedOption) {
        if (renderValue) {
          topElement = renderValue(selectedOption);
        } else {
          topElement = renderOption(selectedOption, true);
        }
      } else {
        topElement = /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
          className: classes.label
        }, label);
      }
    } else {
      topElement = /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
        className: classes.label
      }, label);
    }
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.root
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.button,
      onClick: onProductPartClicked
    }, topElement, renderArrow()));
  };
  return renderComponent();
};
SelectableRow.defaultProps = {
  selectedOption: {},
  showSelected: false
};
var _default = exports["default"] = SelectableRow;