import React from 'react';

import { Switch } from '@djangocfg/ui-core/components';
import { WidgetProps } from '@rjsf/utils';

/**
 * Switch toggle widget for JSON Schema Form
 * Alternative boolean input
 */
export function SwitchWidget(props: WidgetProps) {
  const {
    id,
    value,
    disabled,
    readonly,
    onChange,
    onBlur,
    onFocus,
  } = props;

  const handleChange = (checked: boolean) => {
    onChange(checked);
  };

  return (
    <Switch
      id={id}
      checked={value || false}
      disabled={disabled || readonly}
      onCheckedChange={handleChange}
      onBlur={() => onBlur(id, value)}
      onFocus={() => onFocus(id, value)}
    />
  );
}
