import React from "react";
import Drop from "../../../../drops/drop/index.js";
import Flex from "../../../../templates/flex";
import { ListItem, Text } from "../../../../typography";
import { Checkbox } from "../../../../checkbox";
var ColumnsMenuItem = function ColumnsMenuItem(_ref) {
  var column = _ref.column,
    dataGa = _ref.dataGa,
    disabled = _ref.disabled;
  var checked = column.getIsVisible();
  return /*#__PURE__*/React.createElement(Flex, {
    alignItems: "center",
    as: ListItem,
    justifyContent: "between",
    padding: [1]
  }, /*#__PURE__*/React.createElement(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.createElement(Drop, {
    background: "dropdown",
    height: {
      max: "400px"
    },
    onClickOutside: onClose,
    overflow: {
      vertical: "auto"
    },
    round: 1,
    target: parentRef.current,
    width: 50,
    align: {
      top: "bottom",
      right: "right"
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    },
    padding: [3, 3, 1]
  }, /*#__PURE__*/React.createElement(Text, {
    color: "textLite"
  }, "Edit columns")), /*#__PURE__*/React.createElement(Flex, {
    column: true,
    padding: [1, 3]
  }, pinnedColumns.length ? /*#__PURE__*/React.createElement(Flex, {
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    },
    column: true
  }, pinnedColumns.map(function (pinnedColumn) {
    return /*#__PURE__*/React.createElement(ColumnsMenuItem, {
      column: pinnedColumn,
      dataGa: dataGa,
      key: pinnedColumn.id
    });
  })) : null, columns.map(function (column) {
    return /*#__PURE__*/React.createElement(ColumnsMenuItem, {
      column: column,
      dataGa: dataGa,
      key: column.id
    });
  })));
  return null;
};
export default ColumnsMenu;