Jungfraujoch/frontend/src/components/InstrumentMetadata.tsx

import {ChangeEvent, memo, useEffect, useState} from 'react';

import {
    Autocomplete,
    Checkbox,
    FormControlLabel, FormGroup,
    TextField
} from "@mui/material";
import {instrument_metadata} from "../client";
import {putConfigInstrumentMutation} from "../client/@tanstack/react-query.gen";
import _ from "lodash";
import SettingsPanel from "./SettingsPanel";
import {useUpload} from "./useUpload";

type MyProps = {
    s?: instrument_metadata
}

const default_instrument_metadata: instrument_metadata = {
    source_name: "Swiss Light Source",
    instrument_name: "X06SA",
    source_type: "Synchrotron X-ray Source",
    pulsed_source: false,
    electron_source: false
}

const source_types : string[] = [
    "Synchrotron X-ray Source",
    "Free-Electron Laser",
    "Rotating Anode X-ray",
    "Fixed Tube X-ray",
    "Electron microscope",
    "X-ray Plasma Source",
    "Metal Jet X-ray"
];

function InstrumentMetadata({s: serverS}: MyProps) {
    const [s, setS] = useState<instrument_metadata>(default_instrument_metadata);
    const [lastDownloadedS, setLastDownloadedS] = useState<instrument_metadata>(default_instrument_metadata);
    const { submit, pending, snackbar } = useUpload(putConfigInstrumentMutation());

    useEffect(() => {
        if ((serverS !== undefined) && !_.isEqual(serverS, lastDownloadedS)) {
            setS(serverS);
            setLastDownloadedS(serverS);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [serverS]);

    const dirty = !_.isEqual(s, lastDownloadedS);

    return (
        <SettingsPanel title="Source and instrument metadata" dirty={dirty}
                       onUpload={() => submit(s)} uploadDisabled={pending} snackbar={snackbar}>
                <TextField id="source_name" label="Source name" variant="outlined"
                           fullWidth
                           onChange={(event: ChangeEvent<HTMLInputElement>) => {
                               setS(prev => ({...prev, source_name: event.target.value}));
                           }}
                           value={s.source_name}/>
                <TextField id="instrument_name" label="Instrument name" variant="outlined"
                           fullWidth
                           onChange={(event: ChangeEvent<HTMLInputElement>) => {
                               setS(prev => ({...prev, instrument_name: event.target.value}));
                           }}
                           value={s.instrument_name}/>
                <Autocomplete
                    fullWidth
                    freeSolo
                    multiple={false}
                    onChange={(event, newValue: string | null | undefined) => {
                        if (typeof newValue === "string")
                            setS(prev => ({...prev, source_type: newValue}));
                    }}

                    inputValue={s.source_type}

                    onInputChange={(_event, newInputValue: string) => {
                        setS(prev => ({...prev, source_type: newInputValue}));
                    }}
                    selectOnFocus
                    clearOnBlur
                    value={s.source_type}
                    options={source_types}
                    renderInput={(params) => <TextField {...params} label="Source type" variant="outlined"/>}
                />
                <FormGroup>
                    <FormControlLabel control={
                        <Checkbox checked={s.pulsed_source === true}
                                  onChange={
                                      (event: ChangeEvent<HTMLInputElement>) => {
                                          setS(prev => ({...prev, pulsed_source: event.target.checked}));
                                      }}/>
                    } label="Pulsed source (XFEL)"/>
                    <FormControlLabel control={
                        <Checkbox checked={s.electron_source === true}
                                  onChange={
                                      (event: ChangeEvent<HTMLInputElement>) => {
                                          setS(prev => ({...prev, electron_source: event.target.checked}));
                                      }}/>
                    } label="Electron source"/>
                </FormGroup>
        </SettingsPanel>
    );
}

export default memo(InstrumentMetadata);