import React__default, { useRef } from 'react';
import { B as BottomWrapper } from './BottomWrapper-5b88a1bb.js';
import { I as Input } from './index-acbba672.js';
import { q as appContext, c2 as Button } from './MapEditView-f6381866.js';
import { C as Checkbox } from './index-d6e25798.js';
import { observer } from 'mobx-react';
import { useVirtualList } from 'ahooks';
import './Search-8ea8abe8.js';
import 'classnames';
import 'react-is';
import 'maptalks';
import 'lodash';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
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 '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';
import './Spin-84813b22.js';

const FenceSingleList = observer(() => {
    const Context = appContext.getContext();
    const value = React__default.useContext(Context);
    const { routeStore, prefixCls } = value;
    const { onSearch, MobileUIStore: { setFenceSingleList }, GeoFiltersStore: { geoData, selectedGeo, setSelectedGeo }, } = routeStore;
    const containerRef = useRef(null);
    const wrapperRef = useRef(null);
    const [list] = useVirtualList((geoData === null || geoData === void 0 ? void 0 : geoData.features) || [], {
        containerTarget: containerRef,
        wrapperTarget: wrapperRef,
        itemHeight: 50,
        overscan: 5,
    });
    return (React__default.createElement(BottomWrapper, { title: "\u56F4\u680F\u7B5B\u9009", iconClick: () => {
            setFenceSingleList(false);
        } },
        React__default.createElement("div", { className: "dm-map-mobile-fence-single-list" },
            React__default.createElement(Input, { className: "pointer-events-auto pl12", placeholder: "\u641C\u7D22\u56F4\u680F", bordered: false }),
            React__default.createElement("div", { className: "pointer-events-auto dm-map-mobile-fence-single-list-item" },
                React__default.createElement(Checkbox, { indeterminate: selectedGeo.length > 0 && selectedGeo.length < list.length, checked: selectedGeo.length === list.length, onChange: () => {
                        if (selectedGeo.length === list.length) {
                            setSelectedGeo([]);
                        }
                        else {
                            setSelectedGeo(list.map((ele) => { var _a; return (_a = ele === null || ele === void 0 ? void 0 : ele.data) === null || _a === void 0 ? void 0 : _a.properties.id; }));
                        }
                    } }, "\u5168\u9009")),
            React__default.createElement("div", { ref: containerRef, style: { height: '300px', overflow: 'auto' } },
                React__default.createElement("div", { ref: wrapperRef, className: "pointer-events-auto" }, list.map((ele) => {
                    var _a, _b;
                    console.log(ele, 'ele');
                    const checked = selectedGeo.includes((_a = ele === null || ele === void 0 ? void 0 : ele.data) === null || _a === void 0 ? void 0 : _a.properties.id);
                    return (React__default.createElement("div", { key: ele.index, className: "dm-map-mobile-fence-single-list-item" },
                        React__default.createElement(Checkbox, { checked: checked, onChange: () => {
                                var _a;
                                const id = (_a = ele === null || ele === void 0 ? void 0 : ele.data) === null || _a === void 0 ? void 0 : _a.properties.id;
                                if (checked) {
                                    setSelectedGeo(selectedGeo.filter((ele) => ele !== id));
                                }
                                else {
                                    setSelectedGeo([...selectedGeo, id]);
                                }
                            } }, (_b = ele === null || ele === void 0 ? void 0 : ele.data) === null || _b === void 0 ? void 0 : _b.properties.name)));
                }))),
            React__default.createElement("div", { className: "dm-map-mobile-fence-single-list-bottom" },
                React__default.createElement(Button, { style: { flex: 1 }, onClick: () => {
                        setFenceSingleList(false);
                    } }, "\u53D6\u6D88"),
                React__default.createElement(Button, { style: { flex: 1 }, type: "primary", onClick: () => {
                        onSearch();
                        setFenceSingleList(false);
                    } }, "\u786E\u8BA4")))));
});

export { FenceSingleList as default };
