import * as React from 'react';
import { observer } from 'mobx-react';
import { map } from 'lodash';
import { p as i18n$1, q as appContext, aw as Select } from './MapEditView-f6381866.js';
import { M as MapDrawerHeader } from './MapDrawerHeader-35235c8e.js';
import { T as Transfer, a as TransferMode } from './Transfer-b219601e.js';
import 'maptalks';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'classnames';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'axios';
import 'superstruct';
import '@tanem/react-nprogress';
import 'jquery';
import 'chroma-js';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
import '@syncpoint/wkx';
import 'buffer';
import '@turf/turf';
import '@mapbox/polylabel';
import 'turf-multipolygon';
import 'turf-polygon';
import 'gcoord';
import 'eventemitter2';
import 'geobuf';
import 'localforage';
import 'rc-menu';
import 'perfect-scrollbar';
import 'ahooks';
import 'jszip';
import 'file-saver';
import 'screenfull';
import 'sql-formatter-fork';
import 'array-move';
import 'turf-multilinestring';
import 'copy-to-clipboard';
import 'maptalks.three';
import 'ajv';
import 'spark-md5';
import 'react-draggable';
import 'react-virtualized';
import 'turf-point';
import 'decamelize';
import 'rbush';
import 'qs';
import 'maptalks.snap';
import 'react-use';
import 'react-rnd';
import 'react-beautiful-dnd';

const { useState, useMemo } = React;
const prefixCls = 'info-window-settings';
const i18n = i18n$1.mapEdit.infoWindowSetting;
const i18nSettingPanel = i18n$1.mapEdit.settingsPanel;
const selectOptions = [
    { label: i18nSettingPanel.none, value: -1, key: -1 },
    { label: i18nSettingPanel.noDigit, value: 0, key: 0 },
    { label: '1', value: 1, key: 1 },
    { label: '2', value: 2, key: 2 },
    { label: '4', value: 4, key: 4 },
];
const InfoWindowSetting = observer((props) => {
    const { routeStore } = React.useContext(appContext.getContext());
    const { CardsStore, SuppFiltersStore } = routeStore;
    const { getCard } = CardsStore;
    const { getColList, getCol, getColUuid, getColClassification } = SuppFiltersStore;
    const { cardId, onCancel } = props;
    const card = getCard(cardId);
    const { infoVisual, updateInfoVisual, uuid } = card || {};
    const { fieldIds, showPicSet } = infoVisual || {};
    const _list = useMemo(() => {
        const { noBottomList } = getColList({ uuid }) || {};
        return noBottomList;
    }, [getColList, uuid]);
    const _values = useMemo(() => {
        return map(fieldIds, (f) => {
            return getCol({ uuid, fieldId: f });
        });
    }, [fieldIds, uuid, getCol]);
    const [decimals, setDecimals] = useState((infoVisual === null || infoVisual === void 0 ? void 0 : infoVisual.decimalSetting) || -1);
    const [values, setValues] = useState(_values);
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [_showPicSet, setShowPicSet] = useState(showPicSet);
    const ref = React.useRef(null);
    const _ok = () => {
        const fieldIds = map(values, (v) => {
            return getColUuid({ uuid, col: v });
        });
        const visual = Object.assign(Object.assign({}, infoVisual), { fieldIds, showPicSet: _showPicSet, decimalSetting: decimals });
        updateInfoVisual === null || updateInfoVisual === void 0 ? void 0 : updateInfoVisual(visual);
        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
    };
    // const suppFilter = getCurrentSuppFilter();
    // const columns = suppFilter.allColumns.filter(HIDE_COLS).map(({ uuid, column }) => ({
    //   title: column,
    //   key: uuid,
    // }));
    const columns = _list.map((column) => ({
        title: column,
        key: column,
        type: getColClassification({ uuid, col: column }),
    }));
    const handleCheckChange = (selected) => {
        setValues(selected);
    };
    const handleOrderChange = (newOrder) => {
        setValues(newOrder);
    };
    const handleDecimalChange = (value) => {
        setDecimals(Number.parseInt(value));
    };
    const getPopupContainer = () => ref.current;
    return (React.createElement("div", { className: prefixCls, ref: ref },
        React.createElement(MapDrawerHeader, { title: i18n$1.mapEdit.settingsPanel.infoWindowSetting, okText: i18n$1.mapEdit.okText, cancelText: i18n$1.mapEdit.cancelText, onOk: _ok, onCancel: onCancel }),
        React.createElement("div", { className: `${prefixCls}-list-setting` },
            React.createElement("div", { className: "fields-to-display", "data-test": "map-info-window-setting-panel-transfer" },
                React.createElement(Transfer, { showCount: false, allowClear: true, allSelectLabel: i18n$1.mapEdit.selectAll, mode: TransferMode.plain, value: values, options: columns, sortable: true, sortListDescriptionText: i18nSettingPanel.fieldsSelected, checkListDescriptionText: i18n.displayFieldsHint, onChange: handleCheckChange, onRemove: handleOrderChange, checkListDynamicRowHeight: true })),
            React.createElement("div", { className: "property-settings" },
                React.createElement("span", { className: "title" }, i18nSettingPanel.propertiesSettings),
                React.createElement("div", { className: "property-sets" },
                    React.createElement("span", { className: "sub-title" }, i18n$1.mapEdit.settingsPanel.fontFraction),
                    React.createElement(Select, { createAble: true, size: "compact", value: decimals !== null && decimals !== void 0 ? decimals : -1, placeholder: i18nSettingPanel.none, options: selectOptions, onSelect: handleDecimalChange, className: "select", getPopupContainer: getPopupContainer }),
                    React.createElement("div", { className: "hint" }, i18nSettingPanel.decimalSettingHint))))));
});
var InfoWindowSetting$1 = InfoWindowSetting;

export { InfoWindowSetting$1 as default };
