"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnsSection = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../../../components/CheckBox");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
const icons_1 = require("../../../../components/icons");
const InfiniteTable_1 = require("../../../../components/InfiniteTable");
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const AdaptablePopover_1 = require("../../../AdaptablePopover");
const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
const tableDOMProps = {
    style: {
        height: '100%',
        minWidth: '10rem',
        minHeight: 300,
        flex: 1,
    },
};
const ColumnsSection = (props) => {
    const { api } = (0, AdaptableContext_1.useAdaptable)();
    const primaryKey = api.optionsApi.getPrimaryKey();
    const allColumns = React.useMemo(() => {
        return api.columnApi
            .getColumns()
            .filter((col) => col.field)
            .map((column) => ({
            label: column.friendlyName,
            value: column,
        }));
    }, []);
    const handleColumnMapChange = (newColMap) => {
        var _a;
        props.onColumnsChange((_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.map((cm) => {
            if (cm.field === newColMap.field) {
                return Object.assign(Object.assign({}, cm), newColMap);
            }
            return cm;
        }));
    };
    const columns = React.useMemo(() => {
        return {
            include: {
                field: 'include',
                header: 'Included',
                maxWidth: 110,
                align: 'center',
                render: (params) => {
                    var _a, _b;
                    return (React.createElement(CheckBox_1.CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
                            handleColumnMapChange(Object.assign(Object.assign({}, params.data), { include: checked }));
                        }, checked: Boolean(params.data.include) }));
                },
            },
            field: {
                field: 'field',
                header: 'Data Field',
            },
            abColumn: {
                header: 'AdapTable Column',
                render: (params) => {
                    var _a, _b, _c, _d, _e, _f;
                    // filter out used columns
                    const availableColumns = allColumns
                        .filter((c) => { var _a; return !((_a = props.columnsMap) === null || _a === void 0 ? void 0 : _a.find((cm) => cm.abColumn === c.value)); })
                        .map((col) => {
                        return Object.assign(Object.assign({}, col), { onClick: () => {
                                handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: col.value, include: true }));
                            } });
                    });
                    return (React.createElement(DropdownButton_1.default, { showClearButton: true, onClear: () => {
                            handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: null, include: false }));
                        }, width: "100%", columns: ['label'], items: availableColumns }, (_f = (_c = (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.friendlyName) !== null && _c !== void 0 ? _c : (_e = (_d = params.data) === null || _d === void 0 ? void 0 : _d.abColumn) === null || _e === void 0 ? void 0 : _e.columnId) !== null && _f !== void 0 ? _f : 'Select Column'));
                },
            },
            valid: {
                header: 'Valid',
                maxWidth: 100,
                minWidth: 90,
                align: 'center',
                render: (row) => {
                    if (!row.data.abColumn) {
                        return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
                    }
                    const successColor = UIHelper_1.default.getColorByMessageType('Success');
                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                },
            },
        };
    }, [props.columnsMap]);
    if (!props.columnsMap) {
        return (React.createElement(rebass_1.Box, { p: 2 },
            React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
                "No Data has been Imported. Go to ",
                React.createElement(Tag_1.Tag, null, "Upload"),
                " step and provide Data")));
    }
    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
        React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
            React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
                    React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
                            valid: 'end',
                            type: 'end',
                        }, columnTypes: {
                            default: {
                                minWidth: 100,
                                defaultFlex: 1,
                            },
                        }, domProps: tableDOMProps, columns: columns }))))));
};
exports.ColumnsSection = ColumnsSection;
exports.ColumnsSection.displayName = 'ColumnsSection';
