import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { useId } from 'react-aria';
import { TableCell, TableRow, TextField } from '@vitessce/styles';
import { usePlotOptionsStyles, OptionSelect } from '@vitessce/vit-s';
import { capitalize } from '@vitessce/utils';
export default function GatingScatterplotOptions(props) {
    const { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform, setGatingFeatureValueTransform, gatingFeatureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient, geneSelectOptions, transformOptions, } = props;
    const gatingScatterplotOptionsId = useId();
    const gatingScatterplotGeneXId = useId();
    const gatingScatterplotGeneYId = useId();
    const { classes } = usePlotOptionsStyles();
    // Handlers for custom option field changes.
    const handleSelectionX = (event) => {
        setGatingFeatureSelectionX(event.target.value === '' ? null : event.target.value);
    };
    const handleSelectionY = (event) => {
        setGatingFeatureSelectionY(event.target.value === '' ? null : event.target.value);
    };
    const handleTransformChange = (event) => {
        setGatingFeatureValueTransform(event.target.value === '' ? null : event.target.value);
    };
    // Feels a little hacky, but I think this is the best way to handle
    // the limitations of the v4 material-ui number input.
    const handleTransformCoefficientChange = (event) => {
        const { value } = event.target;
        if (!value) {
            setGatingFeatureValueTransformCoefficient(value);
        }
        else {
            const newCoefficient = Number(value);
            if (!Number.isNaN(newCoefficient) && newCoefficient >= 0) {
                setGatingFeatureValueTransformCoefficient(value);
            }
        }
    };
    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`, children: [capitalize(featureType), " along X"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: gatingFeatureSelectionX ?? '', onChange: handleSelectionX, inputProps: {
                                id: `scatterplot-gating-gene-select-${gatingScatterplotGeneXId}`,
                            }, children: [_jsx("option", { value: "", children: "None" }), geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name)))] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsxs("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`, children: [capitalize(featureType), " along Y"] }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsxs(OptionSelect, { className: classes.select, value: gatingFeatureSelectionY ?? '', onChange: handleSelectionY, inputProps: {
                                id: `scatterplot-gating-gene-select-${gatingScatterplotGeneYId}`,
                            }, children: [_jsx("option", { value: "", children: "None" }), geneSelectOptions.map(name => (_jsx("option", { value: name, children: name }, name)))] }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? '' : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
                                id: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`,
                            }, children: transformOptions.map(opt => (_jsx("option", { value: opt.value === null ? '' : opt.value, children: opt.name }, opt.name))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, variant: "head", scope: "row", children: _jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), _jsx(TableCell, { className: classes.inputCell, variant: "body", children: _jsx(TextField, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, slotProps: { inputLabel: { shrink: true } }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] }));
}
