"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _index = _interopRequireDefault(require("../../../../drops/drop/index.js"));
var _flex = _interopRequireDefault(require("../../../../templates/flex"));
var _typography = require("../../../../typography");
var _checkbox = require("../../../../checkbox");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var ColumnsMenuItem = function ColumnsMenuItem(_ref) {
  var column = _ref.column,
    dataGa = _ref.dataGa,
    disabled = _ref.disabled;
  var checked = column.getIsVisible();
  return /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    alignItems: "center",
    as: _typography.ListItem,
    justifyContent: "between",
    padding: [1]
  }, /*#__PURE__*/_react["default"].createElement(_checkbox.Checkbox, {
    checked: checked,
    disabled: disabled,
    label: column.columnDef.name || column.id,
    onChange: function onChange(val) {
      return column.getToggleVisibilityHandler()({
        target: {
          checked: val
        }
      });
    },
    "data-ga": "columns-menu::click-" + (checked ? "disable" : "enable") + "-" + column.id + "-::" + dataGa
  }));
};
var ColumnsMenu = function ColumnsMenu(_ref2) {
  var dataGa = _ref2.dataGa,
    parentRef = _ref2.parentRef,
    isOpen = _ref2.isOpen,
    columns = _ref2.columns,
    onClose = _ref2.onClose,
    pinnedColumns = _ref2.pinnedColumns;
  if (parentRef.current && isOpen) return /*#__PURE__*/_react["default"].createElement(_index["default"], {
    background: "dropdown",
    height: {
      max: "400px"
    },
    onClickOutside: onClose,
    overflow: {
      vertical: "auto"
    },
    round: 1,
    target: parentRef.current,
    width: 50,
    align: {
      top: "bottom",
      right: "right"
    }
  }, /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    },
    padding: [3, 3, 1]
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    color: "textLite"
  }, "Edit columns")), /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    column: true,
    padding: [1, 3]
  }, pinnedColumns.length ? /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    },
    column: true
  }, pinnedColumns.map(function (pinnedColumn) {
    return /*#__PURE__*/_react["default"].createElement(ColumnsMenuItem, {
      column: pinnedColumn,
      dataGa: dataGa,
      key: pinnedColumn.id
    });
  })) : null, columns.map(function (column) {
    return /*#__PURE__*/_react["default"].createElement(ColumnsMenuItem, {
      column: column,
      dataGa: dataGa,
      key: column.id
    });
  })));
  return null;
};
var _default = exports["default"] = ColumnsMenu;