var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { Fill, Style, Stroke, Icon, Circle } from 'ol/style';
import { transform } from 'ol/proj';
import { makeStyles, Grid, lighten } from '@material-ui/core';
import { ChromeCloseIcon } from '@fluentui/react-icons';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import { isArray, isObject, startCase } from 'lodash-es';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import TruckIcon from '../../assets/unityIcons/TruckIcon.svg';
import ListView from './ui/ListView';
import ActionsRenderer from './ui/ActionsRenderer';
import { FluentTextField } from '../inputs/textField/FluentTextField';
import { AmbientGridTemplate } from '../templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';
import { useAuthedUser } from '../../utilities/auth/useAuthedUser';
import { FluentIconButton } from '../inputs/buttons/FluentIconButton';
import { StandardTitle } from '../dataDisplay/typography/StandardTitle';
import { AmbientCard } from '../surfaces/cards/AmbientCard';
import { getLayer, generateGeoJsonList } from './utilities/MapUtilities';
import { UdpMapComponent } from '../maps/UdpMapComponent';
import { UdpMapToolbar } from '../maps/UdpMapToolbar';
const useStyles = makeStyles((theme) => ({
    fullHeight: {
        height: '73vh',
        backgroundColor: lighten(theme.palette.primary.light, 0.7),
        overflow: 'auto'
    },
    contentWrapper: {
        display: 'flex'
    },
    detailSheetHeader: {
        display: 'flex',
        backgroundColor: theme.palette.background.paper,
        padding: theme.spacing(1),
        alignItems: 'center',
        gap: theme.spacing(1.5)
    },
    detailSheetBody: {
        padding: theme.spacing(2)
    },
    detailTitle: {
        marginTop: 0
    },
    leftColumn: {
        overflow: 'auto',
        backgroundColor: lighten(theme.palette.primary.light, 0.7)
    },
    listViewWrapper: {
        position: 'relative'
    },
    zoomControl: {
        left: 'auto',
        right: theme.spacing(0.8),
        top: theme.spacing(5)
    }
}));
const styles = {
    Point: [
        new Style({
            image: new Icon({
                anchor: [0.17, 48],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: TruckIcon,
                scale: 0.3
            }),
            zIndex: 1
        }),
        new Style({
            image: new Circle({
                stroke: new Stroke({
                    color: '#0F62FE',
                    width: 1
                }),
                fill: new Fill({
                    color: '#FFFFFF'
                }),
                radius: 20,
                scale: 1.1
            }),
            zIndex: 0
        })
    ],
    LineString: new Style({
        stroke: new Stroke({
            color: '#0F62FE',
            width: 4
        }),
        zIndex: 0
    })
};
export const MapLayout = (props) => {
    const { data, initialSelectedLayers, shellContext, sideSheetTitle, cardConfig, noRightPanelPadding = false, isGeoJsonFormat = true, geoJsonMappingConfig, position = 'default', showMap = true, showList, showGrid = true, 
    //inject data
    getSelectedFeatures, getSelectedLayers, getSelectedViewItemData, rightSectionPanel, rightSectionPanelTitle, rightSectionPanelState, setRightSectionPanelState, overrideDetailRightSection = false, 
    //toolbar
    layerOptions, layerKeySeparator = '', statisticsList, hideZeroValueStats, defaultTileOptionName, hideTileSelection, filterPanel, filterCallback, selectedFeaturesActionPanel, refreshEvent, refreshButtonTooltip, readOnlyMap, addFeaturePanelConfig, 
    //list view props
    noWrapPrimaryText, hideListView = false, listFilter, listViewCardConfig, listViewDetailsEvent, listViewChipConfig, 
    //popover card props
    popoverDetailsEvent, popoverPrimaryActions, popoverMoreIconButtonActions, getMessagePopover, getMessageIconPopover, hideMessageIconPopover, popoverWidth, enableViewFeature = true, enableDeleteFeature, handleDeleteFeature, enableEditFeature, handleEditFeature, 
    //map props
    mapTitle = '', getMapFeatureStyles, getSelectedFeatureStyles, tileLayersOptions, imageLayersOptions, mapZoom, mapCenter, mapProjection, addInteractions, selectedPin, mapHeight = '45vh', addressBar, mapDataProjection, crs, layerKeys, mapFilter, showZoomControl, readOnlyLayers, layerRoles, getVectorLayerSources, enableAddNewFeature, addMultipleFeatures = false, enableSplitFeature, handleAddNewFeatures, handleSplitFeature, handleGetZoomExtent, minZoom, maxZoom, 
    //grid props
    gridTitle, columnDefs, groupingData, frameworkComponents, primaryActionButton, loading, rowNodeIdName, gridHeight = '50vh', paginationPageSize, onSearch, onRowSelected, rowModelType, api, columnApi, gridReady, onCellClicked, gridFilter } = props, otherGridProps = __rest(props, ["data", "initialSelectedLayers", "shellContext", "sideSheetTitle", "cardConfig", "noRightPanelPadding", "isGeoJsonFormat", "geoJsonMappingConfig", "position", "showMap", "showList", "showGrid", "getSelectedFeatures", "getSelectedLayers", "getSelectedViewItemData", "rightSectionPanel", "rightSectionPanelTitle", "rightSectionPanelState", "setRightSectionPanelState", "overrideDetailRightSection", "layerOptions", "layerKeySeparator", "statisticsList", "hideZeroValueStats", "defaultTileOptionName", "hideTileSelection", "filterPanel", "filterCallback", "selectedFeaturesActionPanel", "refreshEvent", "refreshButtonTooltip", "readOnlyMap", "addFeaturePanelConfig", "noWrapPrimaryText", "hideListView", "listFilter", "listViewCardConfig", "listViewDetailsEvent", "listViewChipConfig", "popoverDetailsEvent", "popoverPrimaryActions", "popoverMoreIconButtonActions", "getMessagePopover", "getMessageIconPopover", "hideMessageIconPopover", "popoverWidth", "enableViewFeature", "enableDeleteFeature", "handleDeleteFeature", "enableEditFeature", "handleEditFeature", "mapTitle", "getMapFeatureStyles", "getSelectedFeatureStyles", "tileLayersOptions", "imageLayersOptions", "mapZoom", "mapCenter", "mapProjection", "addInteractions", "selectedPin", "mapHeight", "addressBar", "mapDataProjection", "crs", "layerKeys", "mapFilter", "showZoomControl", "readOnlyLayers", "layerRoles", "getVectorLayerSources", "enableAddNewFeature", "addMultipleFeatures", "enableSplitFeature", "handleAddNewFeatures", "handleSplitFeature", "handleGetZoomExtent", "minZoom", "maxZoom", "gridTitle", "columnDefs", "groupingData", "frameworkComponents", "primaryActionButton", "loading", "rowNodeIdName", "gridHeight", "paginationPageSize", "onSearch", "onRowSelected", "rowModelType", "api", "columnApi", "gridReady", "onCellClicked", "gridFilter"]);
    const [selectedFeatureProperties, setSelectedFeatureProperties] = useState();
    const [showDetails, setShowDetails] = useState(false);
    const [selectedItemData, setSelectedItemData] = useState();
    const [definedProj, setDefinedProj] = useState(false);
    const [enableDragBox, setEnableDragBox] = useState(false);
    const [dataUpdateCount, setDataUpdateCount] = useState(0);
    const [map, setMap] = useState(null);
    const [filteredLayerOptions, setFilterLayerOptions] = useState();
    const [bulkSelectionActive, setBulkSelectionActive] = useState(false);
    const [splitActive, setSplitActive] = useState(false);
    const [selectedFeatureCoordinates, setSelectedFeatureCoordinates] = useState();
    const [addActive, setAddActive] = useState(false);
    const [selectedFeatureIdExternal, setSelectedFeatureIdExternal] = useState();
    const [currentCenter, setCurrentCenter] = useState(mapCenter !== null && mapCenter !== void 0 ? mapCenter : [0, 0]);
    const [selectedLayers, setSelectedLayers] = useState([]);
    const classes = useStyles();
    const user = useAuthedUser();
    const { t } = useTranslation();
    useEffect(() => {
        if ((crs === null || crs === void 0 ? void 0 : crs.length) > 0) {
            proj4.defs(crs);
            register(proj4);
            setDefinedProj(true);
        }
    }, [crs]);
    useEffect(() => {
        if (getSelectedLayers) {
            getSelectedLayers(selectedLayers);
        }
    }, [getSelectedLayers, selectedLayers]);
    useEffect(() => {
        if (getSelectedViewItemData) {
            getSelectedViewItemData(selectedItemData);
        }
    }, [getSelectedViewItemData, selectedItemData]);
    //solve refreshing map data outside map layout
    useEffect(() => {
        if (!data)
            return;
        if (dataUpdateCount === 0) {
            setDataUpdateCount(dataUpdateCount + 1);
        }
        //if the data is updated, force the popover to close
        if (dataUpdateCount === 1) {
            setSelectedFeatureProperties(null);
        }
    }, [data, dataUpdateCount]);
    //data
    const filteredData = useMemo(() => {
        if (!data)
            return [];
        const formattedData = isGeoJsonFormat
            ? data
            : generateGeoJsonList(data, geoJsonMappingConfig);
        //this will return an array of features in geojson format
        if (filterPanel && filterCallback) {
            return filterCallback(formattedData);
        }
        return formattedData;
    }, [
        data,
        filterCallback,
        filterPanel,
        geoJsonMappingConfig,
        isGeoJsonFormat
    ]);
    const gridData = useMemo(() => {
        return filteredData === null || filteredData === void 0 ? void 0 : filteredData.filter((obj) => {
            var _a;
            const layerKey = getLayer(layerKeys, layerKeySeparator, obj);
            if (layerRoles === null || layerRoles === void 0 ? void 0 : layerRoles[layerKey]) {
                return (_a = layerRoles[layerKey]) === null || _a === void 0 ? void 0 : _a.some((roleId) => {
                    var _a;
                    return (_a = user.roleIds) === null || _a === void 0 ? void 0 : _a.includes(roleId);
                });
            }
            return true;
        }).map((obj) => (Object.assign({ id: obj.id }, obj.properties)));
    }, [filteredData, layerKeySeparator, layerKeys, layerRoles, user.roleIds]);
    const filteredGridData = useMemo(() => {
        if (gridFilter) {
            return gridFilter(gridData);
        }
        return gridData;
    }, [gridData, gridFilter]);
    const filteredListData = useMemo(() => {
        if (listFilter) {
            return listFilter(gridData);
        }
        return gridData;
    }, [gridData, listFilter]);
    useEffect(() => {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        //If there are projections need to be defined, but it isn't defined yet. Then, return to prevent errors in transform().
        if ((crs === null || crs === void 0 ? void 0 : crs.length) > 0 && !definedProj)
            return;
        if (((_b = (_a = filteredData === null || filteredData === void 0 ? void 0 : filteredData[0]) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 : _b.coordinates) &&
            mapProjection &&
            mapDataProjection) {
            const coordinates = isArray((_d = (_c = filteredData === null || filteredData === void 0 ? void 0 : filteredData[0]) === null || _c === void 0 ? void 0 : _c.geometry) === null || _d === void 0 ? void 0 : _d.coordinates[0])
                ? (_f = (_e = filteredData === null || filteredData === void 0 ? void 0 : filteredData[0]) === null || _e === void 0 ? void 0 : _e.geometry) === null || _f === void 0 ? void 0 : _f.coordinates[0]
                : (_h = (_g = filteredData === null || filteredData === void 0 ? void 0 : filteredData[0]) === null || _g === void 0 ? void 0 : _g.geometry) === null || _h === void 0 ? void 0 : _h.coordinates;
            const newCenter = transform(coordinates, mapDataProjection, mapProjection);
            setCurrentCenter(newCenter);
        }
    }, [filteredData, mapDataProjection, mapProjection, definedProj, crs]);
    //Default getStyles for map features
    const getStyles = useCallback((feature) => {
        var _a;
        const geometryType = feature.getGeometry().getType();
        return (_a = styles[geometryType]) !== null && _a !== void 0 ? _a : new Style();
    }, []);
    const handleViewDetailsFromPopover = useCallback((data) => {
        var _a;
        const featureProperties = (_a = data === null || data === void 0 ? void 0 : data.selectedFeature) === null || _a === void 0 ? void 0 : _a.getProperties();
        if (popoverDetailsEvent) {
            popoverDetailsEvent(featureProperties);
            return;
        }
        if (setRightSectionPanelState) {
            setRightSectionPanelState(false);
        }
        setShowDetails(true);
        setSelectedItemData(featureProperties);
        if (shellContext) {
            shellContext.setInquiryMenuToggle(false);
        }
    }, [popoverDetailsEvent, setRightSectionPanelState, shellContext]);
    const handleCloseDetailSheet = useCallback(() => {
        setShowDetails(false);
        if (setRightSectionPanelState) {
            setRightSectionPanelState(false);
        }
        setSelectedItemData(null);
    }, [setRightSectionPanelState]);
    const handleViewDetailsFromList = useCallback((data) => {
        setShowDetails(true);
        if (setRightSectionPanelState) {
            setRightSectionPanelState(false);
        }
        setSelectedItemData(data);
        if (shellContext) {
            shellContext.setInquiryMenuToggle(false);
        }
    }, [setRightSectionPanelState, shellContext]);
    const itemDetails = useMemo(() => {
        if (selectedItemData &&
            !overrideDetailRightSection &&
            !rightSectionPanelState) {
            return Object.entries(selectedItemData)
                .filter(([key, value]) => 'geometry' !== key && !isObject(value) && !isArray(value))
                .map(([key, value]) => {
                return (React.createElement(FluentTextField, { label: startCase(key), value: value, InputProps: {
                        readOnly: true
                    } }));
            });
        }
        return;
    }, [overrideDetailRightSection, rightSectionPanelState, selectedItemData]);
    const gridColumnDefinition = useMemo(() => {
        if (!columnDefs)
            return;
        //check if there's actions renderer to use. Otherwise, using the default actions renderer
        if (frameworkComponents === null || frameworkComponents === void 0 ? void 0 : frameworkComponents.actionsRenderer) {
            return columnDefs;
        }
        else {
            return [
                ...columnDefs,
                {
                    headerName: t('Actions'),
                    field: 'actions',
                    suppressSizeToFit: true,
                    minWidth: 100,
                    maxWidth: 125,
                    cellRenderer: 'actionsRenderer',
                    cellRendererParams: {
                        openView: (data) => handleViewDetailsFromList(data)
                    },
                    sortable: false
                }
            ];
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [columnDefs, frameworkComponents]);
    const detailSheetHeight = useMemo(() => {
        if (!showGrid) {
            return '73vh';
        }
        else if (showGrid && !showMap) {
            return `calc(67vh + 6vh)`;
        }
        else {
            return `calc(${mapHeight} + ${gridHeight} + 6vh)`;
        }
    }, [gridHeight, mapHeight, showGrid, showMap]);
    const handleSelectLayers = (e) => {
        setSelectedLayers(e);
    };
    const handleSelectMarker = useCallback((data) => {
        setSelectedFeatureIdExternal(data === null || data === void 0 ? void 0 : data.id);
    }, []);
    const handleOnCellClicked = useCallback((params) => {
        var _a, _b;
        if (onCellClicked) {
            onCellClicked(params);
        }
        if (!((_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.group) && ((_b = params === null || params === void 0 ? void 0 : params.colDef) === null || _b === void 0 ? void 0 : _b.field) !== 'actions') {
            handleSelectMarker(params === null || params === void 0 ? void 0 : params.data);
        }
    }, [handleSelectMarker, onCellClicked]);
    const listView = useMemo(() => {
        if (hideListView)
            return;
        return (React.createElement(ListView, { data: filteredListData !== null && filteredListData !== void 0 ? filteredListData : [], listViewConfig: listViewCardConfig !== null && listViewCardConfig !== void 0 ? listViewCardConfig : cardConfig, noWrapPrimaryText: noWrapPrimaryText, viewEvent: listViewDetailsEvent !== null && listViewDetailsEvent !== void 0 ? listViewDetailsEvent : handleViewDetailsFromList, showMarkerEvent: handleSelectMarker, chipConfig: listViewChipConfig }));
    }, [
        cardConfig,
        filteredListData,
        handleSelectMarker,
        handleViewDetailsFromList,
        hideListView,
        listViewCardConfig,
        listViewChipConfig,
        listViewDetailsEvent,
        noWrapPrimaryText
    ]);
    const handleSetSelectedFeatureProperties = useCallback((currentFeature) => {
        if (currentFeature) {
            let featureProperties = currentFeature === null || currentFeature === void 0 ? void 0 : currentFeature.getProperties();
            setSelectedFeatureCoordinates(currentFeature.getGeometry().getCoordinates());
            setSelectedFeatureProperties(featureProperties);
        }
    }, []);
    const handleCloseFeaturePopover = useCallback(() => {
        setSelectedFeatureIdExternal(null);
    }, []);
    const handleSetMapComponent = useCallback((value) => {
        setMap(value);
    }, []);
    const mapComponent = useMemo(() => {
        return (React.createElement("div", null, React.createElement(Grid, { container: true }, React.createElement(Grid, { item: true, xs: 3, style: {
                display: !hideListView && showList ? 'block' : 'none'
            } }, React.createElement("div", { className: clsx(classes.fullHeight, classes.listViewWrapper) }, listView)), React.createElement(Grid, { item: true, xs: showList ? 9 : 12 }, React.createElement(UdpMapComponent, { map: map, handleSetMapComponent: handleSetMapComponent, data: data, isGeoJsonFormat: isGeoJsonFormat, geoJsonMappingConfig: geoJsonMappingConfig, enableZoom: showZoomControl, mapZoom: mapZoom, mapCenter: currentCenter, mapHeight: mapHeight, crs: crs, mapProjection: mapProjection, mapDataProjection: mapDataProjection, getFilteredMapData: mapFilter, getVectorLayerSources: getVectorLayerSources, getFeatureStyles: getMapFeatureStyles !== null && getMapFeatureStyles !== void 0 ? getMapFeatureStyles : getStyles, getSelectedFeatureStyles: getSelectedFeatureStyles, filterPanel: filterPanel, filterPanelCallback: filterCallback, enableTileSelection: !hideTileSelection, tileLayersOptions: tileLayersOptions, defaultTileOptionName: defaultTileOptionName, layerOptions: layerOptions, initialSelectedLayers: initialSelectedLayers, bulkSelectedFeaturesActionPanel: selectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: getSelectedFeatures, filterLayersByRole: (layerRoles === null || layerRoles === void 0 ? void 0 : layerRoles.length) > 0, layerKeys: layerKeys, layerKeySeparator: layerKeySeparator, user: user, layerRoles: layerRoles, filteredLayerOptionsByRole: filteredLayerOptions, handleSetFilteredLayerOptionsByRole: setFilterLayerOptions, enableViewFeature: enableViewFeature, handleViewFeature: handleViewDetailsFromPopover, bulkSelectionActive: bulkSelectionActive, splitActive: splitActive, enableDragBox: enableDragBox, selectedFeatureCoordinates: selectedFeatureCoordinates, selectedFeatureProperties: selectedFeatureProperties, handleSetSelectedFeatureProperties: handleSetSelectedFeatureProperties, enableAddNewFeature: addActive, readOnlyLayers: readOnlyLayers, selectedFeatureIdExternal: selectedFeatureIdExternal, additionalOnclosePopover: handleCloseFeaturePopover, popoverPrimaryActions: popoverPrimaryActions, popoverMoreIconButtonActions: popoverMoreIconButtonActions, getMessagePopover: getMessagePopover, getMessageIconPopover: getMessageIconPopover, hideMessageIconPopover: hideMessageIconPopover, popoverCardConfig: cardConfig, selectedLayers: selectedLayers, handleSetSelectedLayers: handleSelectLayers, handleGetZoomExtent: handleGetZoomExtent, minZoom: minZoom, maxZoom: maxZoom })))));
    }, [
        addActive,
        bulkSelectionActive,
        cardConfig,
        classes.fullHeight,
        classes.listViewWrapper,
        crs,
        currentCenter,
        data,
        defaultTileOptionName,
        enableDragBox,
        enableViewFeature,
        filterCallback,
        filterPanel,
        filteredLayerOptions,
        geoJsonMappingConfig,
        getMapFeatureStyles,
        getMessageIconPopover,
        getMessagePopover,
        getSelectedFeatureStyles,
        getSelectedFeatures,
        getStyles,
        getVectorLayerSources,
        handleCloseFeaturePopover,
        handleGetZoomExtent,
        handleSetMapComponent,
        handleSetSelectedFeatureProperties,
        handleViewDetailsFromPopover,
        hideListView,
        hideMessageIconPopover,
        hideTileSelection,
        initialSelectedLayers,
        isGeoJsonFormat,
        layerKeySeparator,
        layerKeys,
        layerOptions,
        layerRoles,
        listView,
        map,
        mapDataProjection,
        mapFilter,
        mapHeight,
        mapProjection,
        mapZoom,
        maxZoom,
        minZoom,
        popoverMoreIconButtonActions,
        popoverPrimaryActions,
        readOnlyLayers,
        selectedFeatureCoordinates,
        selectedFeatureIdExternal,
        selectedFeatureProperties,
        selectedFeaturesActionPanel,
        selectedLayers,
        showList,
        showZoomControl,
        splitActive,
        tileLayersOptions,
        user
    ]);
    const gridComponent = useMemo(() => {
        return (React.createElement("div", null, React.createElement(AmbientGridTemplate, Object.assign({ title: gridTitle, data: filteredGridData, columnDefs: gridColumnDefinition, groupingData: groupingData, frameworkComponents: Object.assign({ actionsRenderer: ActionsRenderer }, frameworkComponents), primaryActionButton: primaryActionButton, loading: loading, rowNodeIdName: rowNodeIdName, height: showGrid && !showMap ? '67vh' : gridHeight, paginationPageSize: paginationPageSize, onSearch: onSearch, onRowSelected: onRowSelected, rowModelType: rowModelType, api: api, columnApi: columnApi, gridReady: gridReady, dynamicSizing: true, onCellClicked: handleOnCellClicked }, otherGridProps))));
    }, [
        api,
        columnApi,
        filteredGridData,
        frameworkComponents,
        gridColumnDefinition,
        gridHeight,
        gridReady,
        gridTitle,
        groupingData,
        handleOnCellClicked,
        loading,
        onRowSelected,
        onSearch,
        otherGridProps,
        paginationPageSize,
        primaryActionButton,
        rowModelType,
        rowNodeIdName,
        showGrid,
        showMap
    ]);
    const mapGrid = useMemo(() => {
        if (position === 'gridOnTop') {
            return (React.createElement("div", null, showGrid && gridComponent, showMap && mapComponent));
        }
        return (React.createElement("div", null, showMap && mapComponent, showGrid && gridComponent));
    }, [gridComponent, mapComponent, position, showGrid, showMap]);
    return (React.createElement("div", null, React.createElement(UdpMapToolbar, { map: map, mapTitle: mapTitle, mapProjection: mapProjection, getFeatureStyles: getMapFeatureStyles, getSelectedFeatureStyles: getSelectedFeatureStyles, filterPanel: filterPanel, filterPanelCallback: filterCallback, enableTileSelection: !hideTileSelection, tileLayersOptions: tileLayersOptions, defaultTileOptionName: defaultTileOptionName, layerOptions: layerOptions, initialSelectedLayers: initialSelectedLayers, bulkSelectedFeaturesActionPanel: selectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: getSelectedFeatures, handleSetSelectedFeatureOnSelect: getSelectedViewItemData, handleRefresh: refreshEvent, refreshButtonTooltip: refreshButtonTooltip, readOnlyMap: readOnlyMap, enableAdd: enableAddNewFeature, handleAddNewFeatures: handleAddNewFeatures, addMultipleFeatures: addMultipleFeatures, enableSplitFeature: enableSplitFeature, handleSplitFeature: handleSplitFeature, handleSetSelectedFeatureProperties: handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: filteredLayerOptions, handleSetBulkSelectionActive: setBulkSelectionActive, enableDragBox: enableDragBox, handleSetEnableDragBox: setEnableDragBox, splitActive: splitActive, handleSetSplitActive: setSplitActive, enableAddNewFeature: addActive, handleEnableAddNewFeature: setAddActive, readOnlyLayers: readOnlyLayers, selectedLayers: selectedLayers, handleSetSelectedLayers: handleSelectLayers, addFeaturePanelConfig: addFeaturePanelConfig }), React.createElement(Grid, { container: true }, React.createElement(Grid, Object.assign({ item: true }, (showDetails || rightSectionPanelState
        ? { xs: 7, sm: 9 }
        : { xs: 12 })), mapGrid), (showDetails || rightSectionPanelState) && (React.createElement(Grid, { item: true, xs: 5, sm: 3, className: classes.leftColumn, style: { maxHeight: detailSheetHeight } }, React.createElement("div", { className: classes.detailSheetHeader }, React.createElement(FluentIconButton, { onClick: handleCloseDetailSheet, icon: ChromeCloseIcon }), React.createElement(StandardTitle, { className: classes.detailTitle }, rightSectionPanelTitle !== null && rightSectionPanelTitle !== void 0 ? rightSectionPanelTitle : t('Details'))), React.createElement("div", { className: noRightPanelPadding ? null : classes.detailSheetBody }, rightSectionPanel &&
        (rightSectionPanelState ||
            (showDetails && overrideDetailRightSection)) &&
        rightSectionPanel, showDetails && itemDetails && (React.createElement(AmbientCard, { fullWidth: true }, itemDetails))))))));
};
//# sourceMappingURL=MapLayout.js.map