@mui/material#FormControlLabel TypeScript Examples

function filtersTab(currentTab: number) {
    const { options: { unread, downloaded }, setOption } = useLibraryOptionsContext();

    return (
        <TabPanel index={0} currentIndex={currentTab}>
            <Stack direction="column">
                <FormControlLabel
                    control={(
                        <ThreeStateCheckbox
                            name="Unread"
                            checked={unread}
                            onChange={(change) => setOption('unread', change)}
                        />
                    )}
                    label="Unread"
                />
                <FormControlLabel
                    control={(
                        <ThreeStateCheckbox
                            name="Downloaded"
                            checked={downloaded}
                            onChange={(change) => setOption('downloaded', change)}
                        />
                    )}
                    label="Downloaded"
                />
            </Stack>
        </TabPanel>
    );
}

OptionCheck: React.ComponentType<{
    disabled?: boolean
    checked: boolean
    label: React.ReactNode
    onChange: SwitchBaseProps['onChange']
}> = ({disabled, checked, label, onChange}) => {
    const uid = useUID()

    return <FormControlLabel
        id={'uis-' + uid}
        control={<Checkbox
            id={'uis-' + uid}
            checked={checked}
            onChange={onChange}
            disabled={disabled}
        />}
        disabled={disabled}
        label={label}
    />
}

export default function CheckBoxFilter(props: Props) {
    const {
        state,
        name,
        position,
        group,
        updateFilterValue,
        update,
    } = props;
    const [val, setval] = React.useState(state);

    const handleChange = (event: { target: { name: any; checked: any; }; }) => {
        setval(event.target.checked);
        const upd = update.filter((e: {
            position: number; group: number | undefined;
        }) => !(position === e.position && group === e.group));
        updateFilterValue([...upd, { position, state: event.target.checked.toString(), group }]);
    };

    if (state !== undefined) {
        return (
            <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 120 }}>
                <FormControlLabel
                    key={name}
                    control={(
                        <Checkbox
                            name={name}
                            checked={val}
                            onChange={handleChange}
                        />
                    )}
                    label={name}
                />
            </Box>
        );
    }
    return (<></>);
}

function RadioButton({ checked, label, muiRadioButtonProps, value }: RadioButtonProps) {
  return (
    <StyledRadioButton>
      <FormControlLabel
        value={value}
        className={`${classes.radioWrapper} ${checked ? classes.checked : null}`}
        sx={checked ? {} : undefined}
        label={<Typography className={classes.label}>{label}</Typography>}
        control={
          <Radio
            icon={<div className={classes.circle} />}
            checkedIcon={
              <Check
                color="primary"
                sx={
                  checked
                    ? {
                        width: 30,
                        height: 30,
                        border: `1px solid ${theme.palette.primary.main}`,
                        backgroundColor: theme.palette.primary.main,
                        borderRadius: theme.borders.round,
                        color: theme.palette.common.white,
                      }
                    : undefined
                }
              />
            }
            {...muiRadioButtonProps}
          />
        }
      />
    </StyledRadioButton>
  )
}

/** @internal */
export function RadioGroup(props: TRadioProps) {
  return (
    <FormControl component="fieldset"
      className={props.className}
      style={props.style}
      id={props.id}
    >
      <MuiRadioGroup
        value={props.value}
        onChange={props.onChange}
        name={props.name}
      >
        {props.options?.map(option => {
          const value = typeof option === 'object' ? option.value : option;
          if (!value) return <></>;
          const label = (typeof option === 'object' ? option.label : option) ?? value;
          return (
            <FormControlLabel
              key={value}
              value={value}
              control={<Radio color="primary" />}
              label={label}
            />
          )
        })}
      </MuiRadioGroup>
    </FormControl>
  )
}

export default function DeletedCheckbox() {
  const name = 'deleted'
  const { t } = useTranslation('expenses')
  const [field, meta] = useField(name)

  return (
    <FormControl
      fullWidth
      size="small"
      variant="outlined"
      error={Boolean(meta.error) && Boolean(meta.touched)}>
      <FormControlLabel
        disabled
        control={<Checkbox {...field} />}
        label={`${t('fields.' + name)}`}
      />
    </FormControl>
  )
}

function BooleanPropEditor({ label, value, onChange, disabled }: EditorProps<boolean>) {
  const handleChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      onChange(event.target.checked);
    },
    [onChange],
  );

  return (
    <FormControlLabel
      control={<Checkbox checked={!!value} disabled={disabled} onChange={handleChange} />}
      label={label}
    />
  );
}

function BeatmapRenderSettings() {
  const { beatmapRenderSettingsStore } = useCommonManagers();
  const settings = useObservable(() => beatmapRenderSettingsStore.settings$, DEFAULT_BEATMAP_RENDER_SETTINGS);

  return (
    <Stack>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch
              checked={settings.sliderDevMode}
              onChange={(event) => beatmapRenderSettingsStore.setSliderDevMode(event.target.checked)}
            />
          }
          label={"Slider Dev Mode"}
        />
      </FormGroup>
      {/*  draw slider ends*/}
    </Stack>
  );
}

export default function SwitchElement({ name, control, ...other }: SwitchElementProps) {
  return (
    <FormControlLabel
      control={
        <Controller
          name={name}
          control={control}
          render={({ field }) => <Switch {...field} checked={field.value} />}
        />
      }
      {...other}
    />
  )
}

function AnalysisCursorSettingsSection() {
  const { analysisCursorSettingsStore } = useCommonManagers();
  const settings = useObservable(() => analysisCursorSettingsStore.settings$, DEFAULT_ANALYSIS_CURSOR_SETTINGS);

  return (
    <Paper sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Analysis Cursor</Typography>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={settings.enabled}
                onChange={(event) => analysisCursorSettingsStore.setEnabled(event.target.checked)}
              />
            }
            label={"Enabled"}
          />
        </FormGroup>
      </Stack>
    </Paper>
  );
}

RadioButtonField = ({ className, ...props }: Props) => {
  const { name } = props;
  const [field] = useField({
    name,
    type: "radio",
  });

  return (
    <FormControlLabel
      className={classNames("amp-radio-field", className)}
      {...field}
      {...props}
      control={<Radio classes={{ checked: "amp-radio-field--checked" }} />}
    />
  );
}

function PlaybarSettingsSection() {
  const { playbarSettingsStore } = useCommonManagers();
  const settings = useObservable(() => playbarSettingsStore.settings$, DEFAULT_PLAY_BAR_SETTINGS);

  return (
    <Paper elevation={1} sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Playbar</Typography>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={settings.difficultyGraphEnabled}
                onChange={(event) =>
                  playbarSettingsStore.changeSettings((s) => (s.difficultyGraphEnabled = event.target.checked))
                }
              />
            }
            label={"Show difficulty graph"}
          />
        </FormGroup>
      </Stack>
    </Paper>
  );
}

BaseRadioGroup: React.FC<
  {
    options: unknown[];
    /**
     * Display raidios in a [n, size] matrix
     */
    size: number;
  } & MuiRadioGroupProps
> = (props) => {
  const { children, options, size, ...otherProps } = props;
  // For displaying avaible options in a [n,size] matrix
  const targetOptionsValuesInMatrix = transformToMatrix(
    options,
    size,
  ) as never[][];

  return (
    <div className="mui-radio-group">
      {targetOptionsValuesInMatrix.map((row) => (
        <div key={uuid()}>
          <MuiRadioGroup className="mui-radio-group__group" {...otherProps}>
            {row.map((op) => (
              <FormControlLabel
                className="mui-radio-group__group__column"
                key={op}
                value={op}
                control={
                  <Radio className="mui-radio-group__group__item__radio-btn" />
                }
                label={
                  <div className="mui-radio-group__group__item__label">
                    {op}
                  </div>
                }
              />
            ))}
          </MuiRadioGroup>
        </div>
      ))}
      {children}
    </div>
  );
}

function dispalyTab(currentTab: number) {
    const { options, setOptions } = useLibraryOptionsContext();

    function setContextOptions(
        e: React.ChangeEvent<HTMLInputElement>,
        checked: boolean,
    ) {
        setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
    }

    function setGridContextOptions(
        e: React.ChangeEvent<HTMLInputElement>,
        checked: boolean,
    ) {
        if (checked) {
            setOptions((prev) => ({ ...prev, gridLayout: parseInt(e.target.name, 10) }));
        }
    }

    return (
        <TabPanel index={2} currentIndex={currentTab}>
            <Stack direction="column">
                DISPLAY MODE
                <FormControlLabel
                    label="Compact grid"
                    control={(
                        <Radio
                            name="0"
                            checked={options.gridLayout === 0 || options.gridLayout === undefined}
                            onChange={setGridContextOptions}
                        />
                    )}
                />
                <FormControlLabel
                    label="Comfortable grid"
                    control={(
                        <Radio
                            name="1"
                            checked={options.gridLayout === 1}
                            onChange={setGridContextOptions}
                        />
                    )}
                />
                <FormControlLabel
                    label="list"
                    control={(
                        <Radio
                            name="2"
                            checked={options.gridLayout === 2}
                            onChange={setGridContextOptions}
                        />
                    )}
                />
                BADGES
                <FormControlLabel
                    label="Unread Badges"
                    control={(
                        <Checkbox
                            name="showUnreadBadge"
                            checked={options.showUnreadBadge}
                            onChange={setContextOptions}
                        />
                    )}
                />
                <FormControlLabel
                    label="Download Badges"
                    control={(
                        <Checkbox
                            name="showDownloadBadge"
                            checked={options.showDownloadBadge}
                            onChange={setContextOptions}
                        />
                    )}
                />
            </Stack>
        </TabPanel>
    );
}

function ReplayCursorSettingsSection() {
  const { replayCursorSettingsStore } = useCommonManagers();
  const settings = useObservable(() => replayCursorSettingsStore.settings$, DEFAULT_REPLAY_CURSOR_SETTINGS);

  return (
    <Paper sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Replay Cursor</Typography>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={settings.enabled}
                onChange={(event) =>
                  replayCursorSettingsStore.changeSettings((s) => (s.enabled = event.target.checked))
                }
              />
            }
            label={"Enabled"}
          />
        </FormGroup>
        <FormGroup>
          <FormControlLabel
            disabled={!settings.enabled}
            control={
              <Switch
                checked={settings.smoothCursorTrail}
                onChange={(event) =>
                  replayCursorSettingsStore.changeSettings((s) => (s.smoothCursorTrail = event.target.checked))
                }
              />
            }
            label={"Smooth Cursor Trail"}
          />
        </FormGroup>
        <Typography>Scale</Typography>
        <Slider
          value={Math.round(settings.scale * 100)}
          valueLabelFormat={formatToPercent}
          disabled={!settings.enabled}
          min={10}
          max={200}
          onChange={(_, v) => replayCursorSettingsStore.changeSettings((s) => (s.scale = (v as number) / 100))}
          valueLabelDisplay={"auto"}
        />
      </Stack>
    </Paper>
  );
}

export default function CheckboxElement({
  name,
  validation = {},
  required,
  parseError,
  label,
  control,
  ...rest
}: CheckboxElementProps): JSX.Element {

  if (required) {
    validation.required = 'This field is required'
  }

  return (
    <Controller
      name={name}
      rules={validation}
      control={control}
      render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
        const helperText = error ? (typeof parseError === 'function' ? parseError(error) : error.message) : rest.helperText
        return (
          <FormControl required={required} error={invalid}>
            <FormGroup row>
              <FormControlLabel
                label={label || ''}
                control={
                  <Checkbox
                    color={'primary'}
                    sx={{
                      color: invalid ? "error.main" : undefined,
                    }}
                    value={value}
                    checked={!!value}
                    onChange={() => {
                      onChange(!value)
                      //setValue(name, !formValue, { shouldValidate: true })
                    }}
                  />
                }
              />
            </FormGroup>
            {helperText && <FormHelperText error={invalid}>{helperText}</FormHelperText>}
          </FormControl>
        )
      }}
    />
  )
}

StyledFormControlLabel = styled(FormControlLabel)`
    && {
        color: ${({ theme }) => theme.text} !important;
        margin: 8px;
        opacity: 1;
    }
`

export default function CircleCheckboxField({ name, label, labelProps }: CircleCheckboxField) {
  const { t } = useTranslation('one-time-donation')
  const [field, meta] = useField(name)
  const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
  return (
    <FormControl required component="fieldset" error={Boolean(meta.error) && Boolean(meta.touched)}>
      <FormControlLabel
        sx={
          field.checked
            ? {
                background: lighten(theme.palette.primary.main, 0.8),
                border: `1px solid ${theme.borders.light}`,
              }
            : undefined
        }
        label={<Typography sx={{ fontWeight: 'bold', ml: 1 }}>{label}</Typography>}
        control={
          <Checkbox
            icon={
              <Icon
                sx={(theme) => ({
                  width: 30,
                  height: 30,
                  border: `1px solid ${theme.palette.primary.dark}`,
                  // @ts-expect-error theme doesn't include overrides
                  borderRadius: theme.borders.round,
                })}
              />
            }
            checkedIcon={
              <CheckIcon
                sx={(theme) => ({
                  width: 30,
                  height: 30,
                  border: `1px solid ${theme.palette.primary.main}`,
                  backgroundColor: theme.palette.primary.main,
                  // @ts-expect-error theme doesn't include overrides
                  borderRadius: theme.borders.round,
                  color: '#fff',
                })}
              />
            }
            checked={Boolean(field.value)}
            {...field}
          />
        }
        {...labelProps}
      />
      {Boolean(meta.error) && (
        <FormHelperText error>{helperText ? t(helperText) : 'General Error'}</FormHelperText>
      )}
    </FormControl>
  )
}

export function FormCheckbox({ form, name, options, ...rest }: React.PropsWithChildren<IFormCheckboxProps>) {
	const { register } = form

	return <FormControlLabel
		control={<Checkbox {...register(name, {...options})} />}
		{...rest}
	/>
}

export function BooleanFilterField({
                                       name,
                                       title,
                                       value,
                                       setValue
                                   }: BooleanFieldProps) {
    const classes = useStyles();

    function updateFilter(val?: boolean) {
        if (val !== undefined) {
            setValue(
                ["==", val]
            );
        } else {
            setValue(
                undefined
            );
        }
    }

    const valueSetToTrue = value && value[1];
    const valueSet = !!value;

    return (
        <FormControlLabel
            className={classes.formControl}
            labelPlacement={"end"}
            checked={valueSet && valueSetToTrue}
            control={
                <Checkbox
                    key={`filter-${name}`}
                    indeterminate={!valueSet}
                    onChange={(evt) => {
                        if (valueSetToTrue) { updateFilter(false); } else if (!valueSet) { updateFilter(true); } else { updateFilter(undefined); }
                    }}
                />
            }
            label={!valueSet ? "No filter" : (valueSetToTrue ? `${title} is true` : `${title} is false`)}
        />
    );
}

export function SettingsPage(props: TPluginSettingsProps<TProductFilterSettings>) {
    const onSave = () => {
        getRestApiClient().purgeRendererEntireCache();
    }

    return (
        <PluginSettingsLayout<TProductFilterSettings> {...props} onSave={onSave}>
            {({ pluginSettings, changeSetting }) => {
                const mobileIconPosition = pluginSettings?.mobileIconPosition ?? defaultSettings.mobileIconPosition;
                const collapsedByDefault = pluginSettings?.collapsedByDefault ?? defaultSettings.collapsedByDefault;
                const mobileCollapsedByDefault = pluginSettings?.mobileCollapsedByDefault ?? defaultSettings.mobileCollapsedByDefault;
                return (
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <TextFieldWithTooltip label="List ID"
                            tooltipText="ID of a CList component on the page. See in the source code of a Theme or ask its author"
                            value={pluginSettings?.listId ?? ''}
                            style={{ marginBottom: '15px', marginRight: '15px', maxWidth: '450px' }}
                            onChange={e => changeSetting('listId', e.target.value)}
                        />
                        <TextFieldWithTooltip label="Mobile breakpoint (px)"
                            tooltipText="Width of the browser window in pixels that triggers mobile device mode where will be displayed only small icon that invokes filter modal pop-up"
                            value={(pluginSettings?.mobileBreakpoint ?? 600) + ''}
                            style={{ marginBottom: '15px', marginRight: '15px', maxWidth: '450px' }}
                            onChange={e => {
                                const num = Number(e.target.value);
                                if (!isNaN(num)) changeSetting('mobileBreakpoint', num);
                            }}
                        />
                        <h3 style={{ marginBottom: '15px', marginTop: '20px' }}>Mobile icon position (in pixels):</h3>
                        <TextField label="Top"
                            value={mobileIconPosition.top}
                            style={{ marginBottom: '15px', marginRight: '15px', maxWidth: '150px' }}
                            onChange={e => changeSetting('mobileIconPosition', {
                                ...mobileIconPosition,
                                top: parseInt(e.target.value)
                            })}
                            variant="standard"
                        />
                        <TextField label="Left"
                            value={mobileIconPosition.left}
                            style={{ marginBottom: '15px', maxWidth: '150px' }}
                            onChange={e => changeSetting('mobileIconPosition', {
                                ...mobileIconPosition,
                                left: parseInt(e.target.value)
                            })}
                            variant="standard"
                        />
                        <h3 style={{ marginBottom: '10px', marginTop: '10px' }}>Options visibility</h3>
                        <FormControlLabel
                            control={
                                <Checkbox
                                    checked={collapsedByDefault}
                                    onChange={() => changeSetting('collapsedByDefault', !collapsedByDefault)}
                                    color="primary"
                                />
                            }
                            label="All options collapsed by default at desktop screen"
                        />
                        <FormControlLabel
                            control={
                                <Checkbox
                                    checked={mobileCollapsedByDefault}
                                    onChange={() => changeSetting('mobileCollapsedByDefault', !mobileCollapsedByDefault)}
                                    color="primary"
                                />
                            }
                            label="All options collapsed by default at mobile screen"
                        />
                    </div>
                )
            }}
        </PluginSettingsLayout>
    )
}

DisabledFormControlLabel = styled(FormControlLabel)(({ theme }: { theme: Theme }) => ({
    "& .Mui-disabled": {
        color: theme.palette.text.primary,
        WebkitTextFillColor: theme.palette.text.primary,
    },
}))

FlashingMethodOptions: FunctionComponent<FlashingMethodsListProps> = (
  props
) => {
  const { onChange, currentTarget, currentDevice, firmwareVersionData } = props;
  const targetMappingsSorted = useMemo(
    () => sortDeviceTargets(currentDevice?.targets ?? []),
    [currentDevice?.targets]
  );

  const onFlashingMethodChange = (
    _event: React.ChangeEvent<HTMLInputElement>,
    value: string
  ) => {
    const target = targetMappingsSorted?.find((item) => {
      return item.id === value;
    });
    onChange(target ?? null);
  };

  const flashingMethodRadioOption = useCallback(
    (targetMapping: Target) => {
      const label = (
        <>
          {!targetMapping.flashingMethod
            ? targetMapping.name
            : targetMapping.flashingMethod}
          {targetMapping.flashingMethod !== null && (
            <FlashingMethodDescription
              flashingMethod={targetMapping.flashingMethod}
              deviceWikiUrl={currentDevice?.wikiUrl ?? null}
              firmwareVersionData={firmwareVersionData}
            />
          )}
        </>
      );

      return (
        <FormControlLabel
          key={targetMapping.id}
          value={targetMapping.id}
          sx={styles.radioControl}
          control={<Radio sx={styles.radio} color="primary" />}
          label={label}
        />
      );
    },
    [currentDevice?.wikiUrl, firmwareVersionData]
  );

  return (
    <Box sx={styles.root}>
      <Typography variant="h6" sx={styles.categoryTitle}>
        Flashing Method
      </Typography>
      <FormControl component="fieldset" sx={styles.flashingMethods}>
        <RadioGroup
          row
          value={currentTarget?.id ?? null}
          onChange={onFlashingMethodChange}
          defaultValue="top"
        >
          {targetMappingsSorted?.map((item) => {
            return flashingMethodRadioOption(item);
          })}
        </RadioGroup>
      </FormControl>
    </Box>
  );
}

function QueryStateNodeEditor<P>({ node }: QueryStateNodeEditorProps<P>) {
  const dom = useDom();
  const domApi = useDomApi();
  const app = appDom.getApp(dom);
  const { apis = [] } = appDom.getChildNodes(dom, app);

  const handleSelectionChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const apiNodeId = event.target.value ? (event.target.value as NodeId) : null;
      domApi.setNodeNamespacedProp(node, 'attributes', 'api', appDom.createConst(apiNodeId));
    },
    [domApi, node],
  );

  const handleRefetchOnWindowFocusChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      domApi.setNodeNamespacedProp(
        node,
        'attributes',
        'refetchOnWindowFocus',
        appDom.createConst(event.target.checked),
      );
    },
    [domApi, node],
  );

  const handleRefetchOnReconnectChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      domApi.setNodeNamespacedProp(
        node,
        'attributes',
        'refetchOnReconnect',
        appDom.createConst(event.target.checked),
      );
    },
    [domApi, node],
  );

  const handleRefetchIntervalChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const interval = Number(event.target.value);

      if (Number.isNaN(interval) || interval <= 0) {
        domApi.setNodeNamespacedProp(node, 'attributes', 'refetchInterval', undefined);
      } else {
        domApi.setNodeNamespacedProp(
          node,
          'attributes',
          'refetchInterval',
          appDom.createConst(interval * 1000),
        );
      }
    },
    [domApi, node],
  );

  const argTypes = getQueryNodeArgTypes(dom, node);

  return (
    <React.Fragment>
      <Stack spacing={1} py={1}>
        <NodeNameEditor node={node} />
        <TextField
          select
          fullWidth
          value={node.attributes.api.value || ''}
          label="Query"
          onChange={handleSelectionChange}
        >
          <MenuItem value="">---</MenuItem>
          {apis.map(({ id, name }) => (
            <MenuItem key={id} value={id}>
              {name}
            </MenuItem>
          ))}
        </TextField>
        <ParamsEditor node={node} argTypes={argTypes} />
        <FormControlLabel
          control={
            <Checkbox
              checked={node.attributes.refetchOnWindowFocus?.value ?? true}
              onChange={handleRefetchOnWindowFocusChange}
            />
          }
          label="Refetch on window focus"
        />
        <FormControlLabel
          control={
            <Checkbox
              checked={node.attributes.refetchOnReconnect?.value ?? true}
              onChange={handleRefetchOnReconnectChange}
            />
          }
          label="Refetch on network reconnect"
        />
        <TextField
          InputProps={{
            startAdornment: <InputAdornment position="start">s</InputAdornment>,
          }}
          sx={{ maxWidth: 300 }}
          type="number"
          label="Refetch interval"
          value={refetchIntervalInSeconds(node.attributes.refetchInterval?.value) ?? ''}
          onChange={handleRefetchIntervalChange}
        />
        <PreviewQueryStateResult node={node} />
      </Stack>
    </React.Fragment>
  );
}

DeviceOptionsForm: FunctionComponent<DeviceOptionsFormProps> = (
  props
) => {
  const { target, deviceOptions, onChange, firmwareVersionData } = props;
  const categories = userDefinesToCategories(deviceOptions.userDefineOptions);

  const onOptionUpdate = (data: UserDefine) => {
    const updatedOptions = deviceOptions?.userDefineOptions.map((opt) => {
      if (opt.key === data.key) {
        return {
          ...data,
        };
      }
      // if part of the same optionGroup as the item being updated, disable it.
      if (
        data.enabled &&
        data.optionGroup &&
        data.optionGroup === opt.optionGroup
      ) {
        return {
          ...opt,
          enabled: false,
        };
      }

      return opt;
    });
    onChange({
      ...deviceOptions,
      userDefineOptions: updatedOptions,
    });
  };

  const onUserDefinesTxt = (
    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ) => {
    onChange({
      ...deviceOptions,
      userDefinesTxt: event.currentTarget.value,
    });
  };

  const onUserDefinesMode = (
    _event: React.ChangeEvent<HTMLInputElement>,
    value: string
  ) => {
    onChange({
      ...deviceOptions,
      userDefinesMode: value as UserDefinesMode,
    });
  };

  return (
    <>
      <FormControl component="fieldset" sx={styles.userDefinesMode}>
        <RadioGroup
          row
          value={deviceOptions.userDefinesMode}
          onChange={onUserDefinesMode}
          defaultValue="top"
        >
          <FormControlLabel
            value={UserDefinesMode.UserInterface}
            sx={styles.radioControl}
            control={<Radio sx={styles.radio} color="primary" />}
            label="Standard mode"
          />
          <FormControlLabel
            value={UserDefinesMode.Manual}
            sx={styles.radioControl}
            control={<Radio sx={styles.radio} color="primary" />}
            label="Manual mode"
          />
        </RadioGroup>
      </FormControl>
      {deviceOptions.userDefinesMode === UserDefinesMode.Manual && (
        <>
          <TextField
            sx={styles.textarea}
            multiline
            label="user_defines.txt"
            onBlur={onUserDefinesTxt}
            defaultValue={deviceOptions.userDefinesTxt}
            fullWidth
            rows={10}
          />
        </>
      )}
      {target !== null &&
        categories !== null &&
        deviceOptions.userDefinesMode === UserDefinesMode.UserInterface && (
          <>
            <Grid container spacing={3}>
              <Grid item xs>
                {categories[UserDefineCategory.RegulatoryDomains]?.length >
                  0 && (
                  <>
                    <Typography variant="h6" sx={styles.categoryTitle}>
                      Regulatory domains
                    </Typography>
                    <UserDefinesList
                      options={categories[UserDefineCategory.RegulatoryDomains]}
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
                {categories[UserDefineCategory.BindingPhrase]?.length > 0 && (
                  <>
                    <Typography variant="h6">Binding phrase setup</Typography>
                    <UserDefinesList
                      options={categories[UserDefineCategory.BindingPhrase]}
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
                {categories[UserDefineCategory.CompatibilityOptions]?.length >
                  0 && (
                  <>
                    <Typography variant="h6">Compatibility options</Typography>
                    <UserDefinesList
                      options={
                        categories[UserDefineCategory.CompatibilityOptions]
                      }
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
              </Grid>

              <Grid item xs>
                {categories[UserDefineCategory.PerformanceOptions]?.length >
                  0 && (
                  <>
                    <Typography variant="h6">Performance options</Typography>
                    <UserDefinesList
                      options={
                        categories[UserDefineCategory.PerformanceOptions]
                      }
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
                {categories[UserDefineCategory.ExtraData]?.length > 0 && (
                  <>
                    <Typography variant="h6">Extra data</Typography>
                    <UserDefinesList
                      options={categories[UserDefineCategory.ExtraData]}
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
                {categories[UserDefineCategory.NetworkOptions]?.length > 0 && (
                  <>
                    <Typography variant="h6">Network</Typography>
                    <UserDefinesList
                      options={categories[UserDefineCategory.NetworkOptions]}
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
                {categories[UserDefineCategory.OtherOptions]?.length > 0 && (
                  <>
                    <Typography variant="h6">Other options</Typography>
                    <UserDefinesList
                      options={categories[UserDefineCategory.OtherOptions]}
                      onChange={onOptionUpdate}
                      firmwareVersionData={firmwareVersionData}
                    />
                  </>
                )}
              </Grid>
            </Grid>
          </>
        )}
    </>
  );
}

function QueryEditor({
  appId,
  connectionId,
  value,
  onChange,
}: QueryEditorProps<GoogleSheetsApiQuery>) {
  const [spreadsheetQuery, setSpreadsheetQuery] = React.useState<string | null>(null);

  const debouncedSpreadsheetQuery = useDebounced(spreadsheetQuery, 300);

  const fetchedFiles: UseQueryResult<GoogleDriveFiles> = client.useQuery('dataSourceFetchPrivate', [
    appId,
    connectionId,
    {
      type: GoogleSheetsPrivateQueryType.FILES_LIST,
      spreadsheetQuery: debouncedSpreadsheetQuery,
    },
  ]);

  const fetchedFile: UseQueryResult<GoogleDriveFile> = client.useQuery(
    'dataSourceFetchPrivate',
    value.spreadsheetId
      ? [
          appId,
          connectionId,
          {
            type: GoogleSheetsPrivateQueryType.FILE_GET,
            spreadsheetId: value.spreadsheetId,
          },
        ]
      : null,
  );

  const fetchedSpreadsheet: UseQueryResult<GoogleSpreadsheet> = client.useQuery(
    'dataSourceFetchPrivate',
    value.spreadsheetId
      ? [
          appId,
          connectionId,
          {
            type: GoogleSheetsPrivateQueryType.FETCH_SPREADSHEET,
            spreadsheetId: value.spreadsheetId,
          },
        ]
      : null,
  );

  const selectedSheet = React.useMemo(
    () =>
      fetchedSpreadsheet.data?.sheets?.find(
        (sheet) => sheet.properties?.title === value.sheetName,
      ) ?? null,
    [fetchedSpreadsheet, value],
  );

  const handleSpreadsheetChange = React.useCallback(
    (event, newValue: GoogleDriveFile | null) => {
      onChange({
        ...value,
        sheetName: null,
        spreadsheetId: newValue?.id ?? null,
      });
    },
    [onChange, value],
  );

  const handleSheetChange = React.useCallback(
    (event, newValue: GoogleSheet | null) => {
      onChange({
        ...value,
        sheetName: newValue?.properties?.title ?? null,
      });
    },
    [onChange, value],
  );

  const handleRangeChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      onChange({
        ...value,
        ranges: event.target.value,
      });
    },
    [onChange, value],
  );

  const handleTransformChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      onChange({
        ...value,
        headerRow: event.target.checked,
      });
    },
    [onChange, value],
  );

  const handleSpreadsheetInput = React.useCallback(
    (event: React.SyntheticEvent, input: string, reason: string) => {
      if (reason === 'input') {
        setSpreadsheetQuery(input);
      }
    },
    [],
  );

  return (
    <Stack direction="column" gap={2}>
      <Autocomplete
        fullWidth
        value={fetchedFile.data ?? null}
        loading={fetchedFiles.isLoading}
        loadingText={'Loading...'}
        options={fetchedFiles.data?.files ?? []}
        getOptionLabel={(option: GoogleDriveFile) => option.name ?? ''}
        onInputChange={handleSpreadsheetInput}
        onChange={handleSpreadsheetChange}
        isOptionEqualToValue={(option: GoogleDriveFile, val: GoogleDriveFile) =>
          option.id === val.id
        }
        renderInput={(params) => <TextField {...params} label="Select spreadsheet" />}
        renderOption={(props, option) => {
          return (
            <li {...props} key={option.id}>
              {option.name}
            </li>
          );
        }}
      />
      <Autocomplete
        fullWidth
        loading={fetchedSpreadsheet.isLoading}
        value={selectedSheet}
        loadingText={'Loading...'}
        options={fetchedSpreadsheet.data?.sheets ?? []}
        getOptionLabel={(option: GoogleSheet) => option.properties?.title ?? ''}
        onChange={handleSheetChange}
        renderInput={(params) => <TextField {...params} label="Select sheet" />}
        renderOption={(props, option) => {
          return (
            <li {...props} key={option?.properties?.sheetId}>
              {option?.properties?.title}
            </li>
          );
        }}
      />
      <TextField
        label="Range"
        helperText={`In the form of A1:Z999`}
        value={value.ranges}
        disabled={!value.sheetName}
        onChange={handleRangeChange}
      />
      <FormControlLabel
        label="First row contains column headers"
        control={
          <Checkbox
            checked={value.headerRow}
            onChange={handleTransformChange}
            inputProps={{ 'aria-label': 'controlled' }}
          />
        }
      />
    </Stack>
  );
}

ItemEditor: React.FC = () => {
  const plugin = usePlugin()
  const theme = useTheme()
  const [item, setItem] = useState<Item | undefined>()
  const [types, setTypes] = useState<string[]>([])
  const [tab, setTab] = useState(0)
  const [level, setLevel] = useState(1)
  const [enchantment, setEnchantment] = useState<string | undefined>()
  const [nbtText, setNBTText] = useState('')
  const nbt: NBT = item?.nbt ? parse(item.nbt) : { id: 'minecraft:' + (item?.type || 'air').toLowerCase(), Count: new Byte(1) } as any
  useEffect(() => {
    if (!item || types.length) return
    plugin.emit('item:fetch', (a: string[], b: string[]) => {
      setTypes(a)
      enchantments = b
    })
  }, [item])
  useEffect(() => {
    _setItem = (it: any) => {
      setItem(it)
      setNBTText(it.nbt ? stringify(parse(it.nbt), { pretty: true }) : '')
    }
    return () => { _setItem = null }
  }, [])
  const cancel = () => {
    setItem(undefined)
    if (_resolve) {
      _resolve(false)
      _resolve = null
    }
  }
  const update = () => {
    const newItem: any = { ...item }
    if (nbt) {
      newItem.nbt = stringify(nbt as any)
      setNBTText(stringify(nbt, { pretty: true }))
    }
    setItem(newItem)
  }
  const isAir = item?.type === 'AIR'
  const name = nbt?.tag?.display?.Name
  const enchantmentMap: Record<string, true> = { }
  return <Dialog open={!!item} onClose={cancel}>
    <DialogTitle>{lang.itemEditor.title}</DialogTitle>
    <DialogContent sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
      {item && <Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
        <ItemViewer item={item} />
        <Autocomplete
          options={types}
          sx={{ maxWidth: 300, marginLeft: 1, flexGrow: 1 }}
          value={item?.type}
          onChange={(_, it) => {
            item.type = it || 'AIR'
            if (nbt) nbt.id = 'minecraft:' + (it ? it.toLowerCase() : 'air')
            update()
          }}
          getOptionLabel={it => {
            const locatedName = getName(it.toLowerCase())
            return (locatedName ? locatedName + ' ' : '') + it
          }}
          renderInput={(params) => <TextField {...params} label={lang.itemEditor.itemType} size='small' variant='standard' />}
        />
      </Box>}
      <Tabs centered value={tab} onChange={(_, it) => setTab(it)} sx={{ marginBottom: 2 }}>
        <Tab label={lang.itemEditor.baseAttribute} disabled={isAir} />
        <Tab label={minecraft['container.enchant']} disabled={isAir} />
        <Tab label='NBT' disabled={isAir} />
      </Tabs>
      {nbt && tab === 0 && <Grid container spacing={1} rowSpacing={1}>
        <Grid item xs={12} md={6}><TextField
          fullWidth
          label={lang.itemEditor.count}
          type='number'
          variant='standard'
          value={nbt.Count}
          disabled={isAir}
          onChange={e => {
            nbt.Count = new Byte(item!.amount = parseInt(e.target.value))
            update()
          }}
        /></Grid>
        <Grid item xs={12} md={6}><TextField
          fullWidth
          label={lang.itemEditor.damage}
          type='number'
          variant='standard'
          value={nbt.tag?.Damage}
          disabled={isAir}
          onChange={e => {
            set(nbt, 'tag.Damage', parseInt(e.target.value))
            update()
          }}
        /></Grid>
        <Grid item xs={12} md={6}>
          <TextField
            fullWidth
            label={lang.itemEditor.displayName}
            variant='standard'
            disabled={isAir}
            value={name ? stringifyTextComponent(JSON.parse(name)) : ''}
            onChange={e => {
              set(nbt, 'tag.display.Name', JSON.stringify(item!.name = e.target.value))
              update()
            }}
          />
          <FormControlLabel
            label={minecraft['item.unbreakable']}
            disabled={isAir}
            checked={nbt.tag?.Unbreakable?.value === 1}
            control={<Checkbox
              checked={nbt.tag?.Unbreakable?.value === 1}
              onChange={e => {
                set(nbt, 'tag.Unbreakable', new Byte(+e.target.checked))
                update()
              }} />
            }
          />
        </Grid>
        <Grid item xs={12} md={6}><TextField
          fullWidth
          multiline
          label={lang.itemEditor.lore}
          variant='standard'
          maxRows={5}
          disabled={isAir}
          value={nbt.tag?.display?.Lore?.map(l => stringifyTextComponent(JSON.parse(l)))?.join('\n') || ''}
          onChange={e => {
            set(nbt, 'tag.display.Lore', e.target.value.split('\n').map(text => JSON.stringify(text)))
            update()
          }}
        /></Grid>
      </Grid>}
      {nbt && tab === 1 && <Grid container spacing={1} sx={{ width: '100%' }}>
        {nbt.tag?.Enchantments?.map((it, i) => {
          enchantmentMap[it.id] = true
          return <Grid item key={i}><Chip label={getEnchantmentName(it)} onDelete={() => {
            nbt?.tag?.Enchantments?.splice(i, 1)
            update()
          }} /></Grid>
        })}
        <Grid item><Chip label={lang.itemEditor.newEnchantment} color='primary' onClick={() => {
          setEnchantment('')
          setLevel(1)
        }} /></Grid>
        <Dialog onClose={() => setEnchantment(undefined)} open={enchantment != null}>
          <DialogTitle>{lang.itemEditor.newEnchantmentTitle}</DialogTitle>
          <DialogContent>
            <Box component='form' sx={{ display: 'flex', flexWrap: 'wrap' }}>
              <FormControl variant='standard' sx={{ m: 1, minWidth: 120 }}>
                <InputLabel htmlFor='item-editor-enchantment-selector'>{minecraft['container.enchant']}</InputLabel>
                <Select
                  id='item-editor-enchantment-selector'
                  label={minecraft['container.enchant']}
                  value={enchantment || ''}
                  onChange={e => setEnchantment(e.target.value)}
                >{enchantments
                  .filter(e => !(e in enchantmentMap))
                  .map(it => <MenuItem key={it} value={it}>{getEnchantmentName(it)}</MenuItem>)}
                </Select>
              </FormControl>
              <FormControl sx={{ m: 1, minWidth: 120 }}>
                <TextField
                  label={lang.itemEditor.level}
                  type='number'
                  variant='standard'
                  value={level}
                  onChange={e => setLevel(parseInt(e.target.value))}
                />
              </FormControl>
            </Box>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setEnchantment(undefined)}>{minecraft['gui.cancel']}</Button>
            <Button disabled={!enchantment || isNaN(level)} onClick={() => {
              if (nbt) {
                if (!nbt.tag) nbt.tag = { Damage: new Int(0) }
                ;(nbt.tag.Enchantments || (nbt.tag.Enchantments = [])).push({ id: enchantment!, lvl: new Short(level) })
              }
              setEnchantment(undefined)
              update()
            }}>{minecraft['gui.ok']}</Button>
          </DialogActions>
        </Dialog>
      </Grid>}
    </DialogContent>
    {nbt && tab === 2 && <Box sx={{
      '& .CodeMirror': { width: '100%' },
      '& .CodeMirror-dialog, .CodeMirror-scrollbar-filler': { backgroundColor: theme.palette.background.paper + '!important' }
    }}>
      <UnControlled
        value={nbtText}
        options={{
          mode: 'javascript',
          phrases: lang.codeMirrorPhrases,
          theme: theme.palette.mode === 'dark' ? 'material' : 'one-light'
        }}
        onChange={(_: any, __: any, nbt: string) => {
          const n = parse(nbt) as any as NBT
          const newItem: any = { ...item, nbt }
          if (n.Count?.value != null) newItem.amount = n.Count.value
          setItem(newItem)
        }}
      />
    </Box>}
    <DialogActions>
      <Button onClick={cancel}>{minecraft['gui.cancel']}</Button>
      <Button onClick={() => {
        setItem(undefined)
        if (_resolve) {
          _resolve(!item || item.type === 'AIR' ? null : item)
          _resolve = null
        }
      }}>{minecraft['gui.ok']}</Button>
    </DialogActions>
  </Dialog>
}

export function CodeGenOptionComponent<TSettings>(props:CodeGenOptionComponentProps<TSettings>) {
  const { type, label, prop, value, onChange } = props

  switch (type) {
    case 'boolean':
      return (
        <FormControlLabel
          control={
            <Checkbox
              name={prop}
              checked={value}
              onChange={onChange}
            />
          }
          sx={{ userSelect: 'none' }}
          label={label}
        />
      )
    case 'combo':
      const options = props.options
      return (
        <FormControl fullWidth>
          <InputLabel id={`${prop}-label`}>{label}</InputLabel>
          <Select
            id={`${prop}-select`}
            labelId={`${prop}-label`}
            name={prop}
            value={value}
            onChange={onChange}
            label={label}
          >
            {options.map(({ label, value }) => (
              <MenuItem key={value} value={value}>
                {label}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      )
    case 'string':
      return (
        <TextField
          label={label}
          name={prop}
          onChange={(onChange as unknown as ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>)}
          value={value}
        />
      )
  }
}

export function GalleryBlockSidebar(props: TBlockMenuProps) {
    const forceUpdate = useForceUpdate();
    const data = props.block?.getData();

    const handleChange = (key: keyof TCromwellBlockData['gallery'], value: any) => {
        const data = props.block?.getData();
        if (!data.gallery) data.gallery = {};
        if (!data.gallery.images) data.gallery.images = [];
        props.modifyData?.(Object.assign({}, data, {
            gallery: { ...data.gallery, [key]: value }
        }));
        forceUpdate();
        props.block?.getContentInstance?.()?.forceUpdate();
    }

    const handleNumberInput = (name: keyof TCromwellBlockData['gallery']) => (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        let val = parseFloat(e.target.value);
        if (isNaN(val)) val = undefined;
        handleChange(name, val);
    }

    const handleSelectTextInput = (name: keyof TCromwellBlockData['gallery']) => (e: SelectChangeEvent<unknown>) => {
        let val = e.target.value;
        if (val === '') val = undefined;
        handleChange(name, val);
    }

    const handleBoolInput = (name: keyof TCromwellBlockData['gallery']) => (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
        handleChange(name, checked ?? false);
    }

    return (
        <div>
            <div className={styles.settingsHeader}>
                <PhotoLibraryIcon />
                {props.isGlobalElem(props.getBlockElementById(data?.id)) && (
                    <div className={styles.headerIcon}>
                        <Tooltip title="Global block">
                            <PublicIcon />
                        </Tooltip>
                    </div>
                )}
                <h3 className={styles.settingsTitle}>Gallery settings</h3>
            </div>
            <GalleryPicker
                images={data?.gallery?.images}
                onChange={(val) => handleChange('images', val)}
                className={styles.settingsInput}
                editLink
            />
            <TextField
                fullWidth
                onChange={handleNumberInput('visibleSlides')}
                value={data?.gallery?.visibleSlides ?? 1}
                className={styles.settingsInput}
                type="number"
                variant="standard"
                label="Slides Per View" />
            <TextField
                fullWidth
                onChange={handleNumberInput('width')}
                value={data?.gallery?.width ?? ''}
                className={styles.settingsInput}
                type="number"
                variant="standard"
                label="Width (px)" />
            <TextField
                onChange={handleNumberInput('height')}
                fullWidth
                value={data?.gallery?.height ?? ''}
                className={styles.settingsInput}
                type="number"
                variant="standard"
                label="Height (px)" />
            <TextField
                onChange={handleNumberInput('ratio')}
                fullWidth
                value={data?.gallery?.ratio ?? ''}
                className={styles.settingsInput}
                type="number"
                variant="standard"
                label="Ratio width:height" />
            <TextField
                onChange={(event) => {
                    handleNumberInput('interval')(event);
                    handleBoolInput('autoPlay')(event as any, false);
                    setTimeout(() => handleBoolInput('autoPlay')(event as any, true), 10);
                }}
                fullWidth
                value={data?.gallery?.interval ?? ''}
                className={styles.settingsInput}
                type="number"
                variant="standard"
                label="Interval between slides, ms" />
            {/* <TextField
                onChange={handleNumberInput('speed')}
                fullWidth
                value={data?.gallery?.speed ?? null}
                className={styles.settingsInput}
                type="number"
                    variant="standard"
                label="Transition time between slides, ms" /> */}
            <FormControlLabel
                control={
                    <Checkbox
                        checked={!!data?.gallery?.autoPlay}
                        onChange={handleBoolInput('autoPlay')}
                        color="primary"
                    />
                }
                label="Auto play"
            />
            <FormControlLabel
                control={
                    <Checkbox
                        checked={!!data?.gallery?.navigation}
                        onChange={handleBoolInput('navigation')}
                        color="primary"
                    />
                }
                label="Show navigation"
            />
            <FormControlLabel
                control={
                    <Checkbox
                        checked={!!data?.gallery?.pagination}
                        onChange={handleBoolInput('pagination')}
                        color="primary"
                    />
                }
                label="Show pagination"
            />
            <FormControlLabel
                control={
                    <Checkbox
                        checked={!!data?.gallery?.thumbs}
                        onChange={handleBoolInput('thumbs')}
                        color="primary"
                    />
                }
                label="Show thumbnails"
            />
            <FormControlLabel
                control={
                    <Checkbox
                        checked={!!data?.gallery?.loop}
                        onChange={handleBoolInput('loop')}
                        color="primary"
                    />
                }
                label="Loop slides"
            />
            <FormControlLabel
                control={
                    <Checkbox
                        checked={!!data?.gallery?.fullscreen}
                        onChange={handleBoolInput('fullscreen')}
                        color="primary"
                    />
                }
                label="Enable lightbox pop-up"
            />
            <TextField
                onChange={handleNumberInput('spaceBetween')}
                fullWidth
                value={data?.gallery?.spaceBetween ?? null}
                className={styles.settingsInput}
                type="number"
                variant="standard"
                label="Space between slides, px" />
            <Select
                label="Image fit"
                className={styles.settingsInput}
                fullWidth
                onChange={handleSelectTextInput('backgroundSize')}
                variant="standard"
                value={data?.gallery?.backgroundSize ?? 'cover'}
                options={[{ value: 'contain', label: 'Contain' }, { value: 'cover', label: 'Cover' }]}
            />
            {/* <FormControl
                fullWidth
                className={styles.settingsInput} >
                <InputLabel >Effect</InputLabel>
                <Select
                    fullWidth
                    onChange={handleTextInput('effect')}
                                variant="standard"
                    value={data?.gallery?.effect ?? 'slide'}
                >
                    <MenuItem value={'slide'}>slide</MenuItem>
                    <MenuItem value={'fade'}>fade</MenuItem>
                    <MenuItem value={'cube'}>cube</MenuItem>
                    <MenuItem value={'coverflow'}>coverflow</MenuItem>
                    <MenuItem value={'flip'}>flip</MenuItem>
                </Select>
            </FormControl> */}
            <StylesEditor
                forceUpdate={forceUpdate}
                blockProps={props}
            />
        </div>
    );
}