import React, { useCallback, useState } from 'react';
import i18n from 'ui-i18n';
import { pipe, uniq, pluck, difference, concat } from 'ramda';
import TableIcon from '../icons/Table';
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
import { ColumnsSettingsPopup } from './components/ColumnsSettingsPopup';
import { getChildColumns, isColumnSelected } from './helpers';
export var ColumnsSettings = function (_a) {
    var columnsData = _a.columnsData, selectedColumns = _a.selectedColumns, onChangeColumns = _a.onChangeColumns, title = _a.title, tooltipTitle = _a.tooltipTitle, inputPlaceholder = _a.inputPlaceholder, disabled = _a.disabled;
    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
    var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
    var closePopup = function () { return setAnchorEl(null); };
    var handleColumnClick = useCallback(function (column) {
        var changedColumns = pipe(getChildColumns, pluck('id'))(column);
        var wasSelected = isColumnSelected(selectedColumns, column);
        onChangeColumns(wasSelected
            ? difference(selectedColumns, changedColumns)
            : uniq(concat(selectedColumns, changedColumns)));
    }, [selectedColumns, onChangeColumns]);
    return (React.createElement(React.Fragment, null,
        React.createElement(SmallIconButtonWithTooltip, { "data-reltio-id": "reltio-columns-settings-button", tooltipTitle: tooltipTitle || i18n.text('Show/hide columns'), size: "L", icon: TableIcon, onClick: openPopup, disabled: disabled }),
        React.createElement(ColumnsSettingsPopup, { onColumnClick: handleColumnClick, anchorEl: anchorEl, columnsData: columnsData, onClose: closePopup, title: title, inputPlaceholder: inputPlaceholder, selectedColumns: selectedColumns })));
};
