explore/toolkit/components/forms/fields/FormFieldSwitch.tsx

import React from 'react';
import type { FieldValues, Path } from 'react-hook-form';
import { useController, useFormContext } from 'react-hook-form';

import type { FormFieldPropsBase } from './types';

import { Switch } from '@luxfi/ui/switch';
import type { SwitchProps } from '@luxfi/ui/switch';

export type FormFieldSwitchProps<
  FormFields extends FieldValues,
  Name extends Path<FormFields>,
> = Pick<
  FormFieldPropsBase<FormFields, Name>,
  'name' | 'placeholder' | 'rules' | 'controllerProps'
> &
  SwitchProps;

const FormFieldSwitchContent = <
  FormFields extends FieldValues,
  Name extends Path<FormFields>,
>({
  name,
  placeholder,
  onCheckedChange,
  rules,
  controllerProps,
  disabled,
  ...rest
}: FormFieldSwitchProps<FormFields, Name>) => {
  const { control } = useFormContext<FormFields>();
  const { field, formState } = useController<FormFields, Name>({
    control,
    name,
    rules,
    ...controllerProps,
  });

  const handleCheckedChange = React.useCallback(({ checked }: { checked: boolean }) => {
    field.onChange(checked);
    onCheckedChange?.({ checked });
  }, [ field, onCheckedChange ],
  );

  const switchProps: SwitchProps = {
    checked: field.value,
    onCheckedChange: handleCheckedChange,
    disabled: formState.isSubmitting || disabled,
    inputProps: { onBlur: field.onBlur, name: field.name },
    children: placeholder,
    ...rest,
  };

  return <Switch { ...switchProps }/>;
};

export const FormFieldSwitch = React.memo(FormFieldSwitchContent) as typeof FormFieldSwitchContent;