import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback } from 'react';
import { debounce } from 'lodash-es';
import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
import { capitalize } from '@vitessce/utils';
import { usePlotOptionsStyles, CellColorEncodingOption, OptionsContainer, OptionSelect, } from '@vitessce/vit-s';
import { GLSL_COLORMAPS } from '@vitessce/gl';
export default function ScatterplotOptions(props) {
    const { children, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, } = props;
    const observationsLabelNice = capitalize(observationsLabel);
    const classes = usePlotOptionsStyles();
    function handleCellRadiusModeChange(event) {
        setCellRadiusMode(event.target.value);
    }
    function handleCellOpacityModeChange(event) {
        setCellOpacityMode(event.target.value);
    }
    function handleRadiusChange(event, value) {
        setCellRadius(value);
    }
    function handleOpacityChange(event, value) {
        setCellOpacity(value);
    }
    function handleLabelVisibilityChange(event) {
        setCellSetLabelsVisible(event.target.checked);
    }
    function handleTooltipsVisibilityChange(event) {
        setTooltipsVisible(event.target.checked);
    }
    function handleLabelSizeChange(event, value) {
        setCellSetLabelSize(value);
    }
    function handlePolygonVisibilityChange(event) {
        setCellSetPolygonsVisible(event.target.checked);
    }
    function handleGeneExpressionColormapChange(event) {
        setGeneExpressionColormap(event.target.value);
    }
    function handleColormapRangeChange(event, value) {
        setGeneExpressionColormapRange(value);
    }
    const handleColormapRangeChangeDebounced = useCallback(debounce(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
    return (_jsxs(OptionsContainer, { children: [children, _jsx(CellColorEncodingOption, { observationsLabel: observationsLabel, cellColorEncoding: cellColorEncoding, setCellColorEncoding: setCellColorEncoding }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Labels Visible"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Tooltips Visible" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, 
                            /**
                             * We have to use "checked" here, not "value".
                             * The checkbox state is not persisting with value.
                             * For reference, https://v4.mui.com/api/checkbox/
                             */
                            checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "scatterplot-option-toltip-visibility", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Label Size"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: !cellSetLabelsVisible, classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-labelledby": "cell-set-label-size-slider", valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Set Polygons Visible"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default" }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-radius-mode-select", children: [observationsLabelNice, " Radius Mode"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
                                id: 'cell-radius-mode-select',
                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Radius"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: cellRadiusMode !== 'manual', classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellRadius, onChange: handleRadiusChange, "aria-labelledby": "cell-radius-slider", valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, htmlFor: "cell-opacity-mode-select", children: [observationsLabelNice, " Opacity Mode"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
                                id: 'cell-opacity-mode-select',
                            }, children: [_jsx("option", { value: "auto", children: "Auto" }), _jsx("option", { value: "manual", children: "Manual" })] }) })] }), _jsxs(TableRow, { children: [_jsxs(TableCell, { className: classes.labelCell, children: [observationsLabelNice, " Opacity"] }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { disabled: cellOpacityMode !== 'manual', classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellOpacity, onChange: handleOpacityChange, "aria-labelledby": "cell-opacity-slider", valueLabelDisplay: "auto", step: 0.05, min: 0.0, max: 1.0 }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
                                id: 'gene-expression-colormap-select',
                            }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] })] }));
}
