import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { MapLayersIcon, FilterIcon, BorderDashIcon, SearchIcon, RefreshIcon, SettingsIcon, CancelIcon } from '@fluentui/react-icons';
import { Badge, IconButton, InputAdornment, makeStyles, MenuItem, Popover, TextField, Tooltip, Typography } from '@material-ui/core';
import { CheckboxList } from './CheckboxList';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
import { FluentTextFieldAutoComplete } from '../../inputs/textField/FluentTextFieldAutoComplete';
import { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';
import { searchForLayerOptions } from '../utilities/MapUtilities';
const useStyles = makeStyles((theme) => ({
    toolbarContainer: {
        display: 'flex',
        justifyContent: 'space-between',
        padding: theme.spacing(1)
    },
    statistics: {
        display: 'flex',
        margin: 'auto 0px'
    },
    buttonContainer: {
        display: 'flex',
        columnGap: theme.spacing(1.5)
    },
    filter: {
        width: '290px',
        maxWidth: '290px'
    },
    tileSelection: {
        marginTop: theme.spacing(1)
    },
    layerPopoverContent: {
        margin: theme.spacing(1.5)
    },
    layerPopoverRoot: {
        width: '253px',
        maxHeight: '382px',
        overflow: 'auto'
    },
    layoutPopoverContent: {
        margin: theme.spacing(1.5),
        display: 'flex',
        flexDirection: 'column'
    },
    iconButtonWrapper: {
        backgroundColor: theme.palette.background.paper,
        border: `1px solid ${theme.palette.grey[200]}`,
        padding: theme.spacing(1),
        '&:hover': {
            backgroundColor: theme.palette.background.paper
        }
    },
    selectedFeaturesButtons: {
        display: 'flex',
        columnGap: theme.spacing(1.5),
        margin: 'auto'
    },
    withSelectedBtn: {
        '& .MuiButton-iconSizeSmall': {
            fontSize: '5px'
        }
    }
}));
const MapLayoutToolbar = (props) => {
    const { layerOptions, handleSelectLayers, selectedLayers, tileOptions, handleSelectTile, selectedTile, hideTileSelection, filterPanel, enableDragBox, setEnableDragBox, selectedFeatures, handleUnselectFeatures, selectedFeaturesActionPanel, handleBulkSelectionTypeOnChange, refreshEvent, refreshButtonTooltip } = props;
    const { t } = useTranslation();
    const classes = useStyles();
    const [filterAnchor, setFilterAnchor] = useState(null);
    const [layerAnchor, setLayerAnchor] = useState(null);
    const [bulkSelectionTypeAnchor, setBulkSelectionTypeAnchor] = useState(null);
    const [selectionActionAnchor, setSelectionActionAnchor] = useState(null);
    const [filteredOptions, setFilteredOptions] = useState(layerOptions);
    const handleCloseFilterPopover = () => {
        setFilterAnchor(null);
    };
    const handleCloseLayerPopover = () => {
        setLayerAnchor(null);
    };
    const handleCloseBulkSelectionTypePopover = () => {
        setBulkSelectionTypeAnchor(null);
    };
    const handleCloseSelectionActionPopover = () => {
        setSelectionActionAnchor(null);
    };
    const handleFilterOnclick = (event) => {
        setFilterAnchor(event === null || event === void 0 ? void 0 : event.currentTarget);
    };
    const handleLayerOnclick = (event) => {
        setLayerAnchor(event === null || event === void 0 ? void 0 : event.currentTarget);
        setFilteredOptions(layerOptions);
    };
    const handleSelectionActionOnclick = (event) => {
        setSelectionActionAnchor(event === null || event === void 0 ? void 0 : event.currentTarget);
    };
    const handleSelectionBtnOnclick = (event) => {
        setBulkSelectionTypeAnchor(event === null || event === void 0 ? void 0 : event.currentTarget);
    };
    const handleBulkSelectionTypeOnclick = (value) => {
        setBulkSelectionTypeAnchor(null);
        handleBulkSelectionTypeOnChange(value);
    };
    const handleSearchLayers = useCallback((e) => {
        var _a;
        const searchString = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value;
        if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.trim().length) === 0) {
            setFilteredOptions(layerOptions);
            return;
        }
        const result = searchForLayerOptions(layerOptions, searchString);
        setFilteredOptions(result);
    }, [layerOptions]);
    const handleCancelBoxSelection = () => {
        setEnableDragBox(false);
    };
    return (React.createElement(React.Fragment, null, React.createElement("div", { className: classes.toolbarContainer }, React.createElement("div", { className: classes.buttonContainer }, filterPanel && (React.createElement(IconButtonWithTooltip, { icon: FilterIcon, onClick: handleFilterOnclick, title: t('Filter'), size: "small", className: classes.iconButtonWrapper })), React.createElement(Tooltip, { title: t('Layer') }, React.createElement(IconButton, { "aria-describedby": 'layerPopoverId', onClick: handleLayerOnclick, title: t('Layers'), color: (selectedLayers === null || selectedLayers === void 0 ? void 0 : selectedLayers.length) ? 'primary' : 'default', className: classes.iconButtonWrapper, size: "small" }, (selectedLayers === null || selectedLayers === void 0 ? void 0 : selectedLayers.length) > 0 ? (React.createElement(Badge, { badgeContent: selectedLayers.length, color: "primary" }, React.createElement(MapLayersIcon, null))) : (React.createElement(MapLayersIcon, null)))), selectedFeaturesActionPanel && (React.createElement(IconButtonWithTooltip, { icon: BorderDashIcon, onClick: handleSelectionBtnOnclick, title: t('Select'), size: "small", className: classes.iconButtonWrapper, color: enableDragBox ? 'primary' : 'default' })), refreshEvent && (React.createElement(IconButtonWithTooltip, { icon: RefreshIcon, onClick: refreshEvent, title: refreshButtonTooltip !== null && refreshButtonTooltip !== void 0 ? refreshButtonTooltip : t('Refresh'), size: "small", className: classes.iconButtonWrapper })), (selectedFeatures === null || selectedFeatures === void 0 ? void 0 : selectedFeatures.length) > 0 && (React.createElement("div", { className: classes.selectedFeaturesButtons }, React.createElement(Tooltip, { title: t('With Selected') }, React.createElement(IconButton, { "aria-describedby": 'layerPopoverId', onClick: handleSelectionActionOnclick, title: t('Layers'), color: (selectedLayers === null || selectedLayers === void 0 ? void 0 : selectedLayers.length) ? 'primary' : 'default', className: classes.iconButtonWrapper, size: "small" }, (selectedFeatures === null || selectedFeatures === void 0 ? void 0 : selectedFeatures.length) > 0 ? (React.createElement(Badge, { badgeContent: selectedFeatures === null || selectedFeatures === void 0 ? void 0 : selectedFeatures.length, color: "primary" }, React.createElement(SettingsIcon, null))) : (React.createElement(SettingsIcon, null)))), React.createElement(IconButtonWithTooltip, { icon: CancelIcon, onClick: handleUnselectFeatures, title: t('Cancel'), size: "small", className: classes.iconButtonWrapper }))), enableDragBox && (React.createElement("div", { className: classes.selectedFeaturesButtons }, React.createElement(IconButtonWithTooltip, { icon: CancelIcon, onClick: handleCancelBoxSelection, title: t('Cancel'), size: "small", className: classes.iconButtonWrapper }))))), React.createElement(Popover, { id: 'filterPopoverId', open: filterAnchor ? true : false, anchorEl: filterAnchor, onClose: handleCloseFilterPopover, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'center'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'center'
        } }, filterPanel), React.createElement(Popover, { id: 'layerPopoverId', open: layerAnchor ? true : false, anchorEl: layerAnchor, onClose: handleCloseLayerPopover, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'center'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'center'
        } }, React.createElement("div", { className: classes.layerPopoverRoot }, React.createElement("div", { className: classes.layerPopoverContent }, React.createElement(Typography, { variant: "subtitle2" }, t('Layers')), !hideTileSelection && (React.createElement("div", { className: classes.tileSelection }, React.createElement(FluentTextFieldAutoComplete, { label: t('Map Type'), options: tileOptions !== null && tileOptions !== void 0 ? tileOptions : [], additionalOnChangeAction: handleSelectTile, value: selectedTile, disableClearable: true }))), React.createElement(TextField, { label: t('Filter'), InputProps: {
            endAdornment: (React.createElement(InputAdornment, { position: "end" }, React.createElement(FluentIcon, { component: SearchIcon })))
        }, variant: "outlined", size: "small", onChange: handleSearchLayers }), React.createElement("div", null, React.createElement(CheckboxList, { itemGroups: filteredOptions, values: selectedLayers, onChange: handleSelectLayers }))))), React.createElement(Popover, { id: 'bulkSelectionTypePopoverId', open: bulkSelectionTypeAnchor ? true : false, anchorEl: bulkSelectionTypeAnchor, onClose: handleCloseBulkSelectionTypePopover, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'center'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'center'
        } }, React.createElement("div", { className: classes.layerPopoverRoot }, React.createElement(MenuItem, { onClick: () => {
            handleBulkSelectionTypeOnclick('box');
        } }, t('Box')), React.createElement(MenuItem, { onClick: () => {
            handleBulkSelectionTypeOnclick('circle');
        } }, t('Circle')), React.createElement(MenuItem, { onClick: () => {
            handleBulkSelectionTypeOnclick('polygon');
        } }, t('Polygon')), React.createElement(MenuItem, { onClick: () => {
            handleBulkSelectionTypeOnclick('lasso');
        } }, t('Lasso')))), selectedFeaturesActionPanel && (React.createElement(Popover, { id: 'selectionPopoverId', open: selectionActionAnchor ? true : false, anchorEl: selectionActionAnchor, onClose: handleCloseSelectionActionPopover, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'left'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'left'
        } }, selectedFeaturesActionPanel))));
};
export default MapLayoutToolbar;
//# sourceMappingURL=MapLayoutToolbar.js.map