import type { CheckboxField } from '@payloadcms/plugin-form-builder/types';
import React from 'react';
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form';
import { useFormContext } from 'react-hook-form';

import { Checkbox as CheckboxUi } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

import { Error } from '../Error';
import { Width } from '../Width';

export const Checkbox: React.FC<
  CheckboxField & {
    errors: Partial<FieldErrorsImpl>;
    register: UseFormRegister<FieldValues>;
  }
> = ({ name, defaultValue, errors, label, register, required, width }) => {
  const props = register(name, { required: required });
  const { setValue } = useFormContext();

  return (
    <Width width={width}>
      <div className='flex items-center gap-2'>
        <CheckboxUi
          defaultChecked={defaultValue}
          id={name}
          {...props}
          onCheckedChange={(checked) => {
            setValue(props.name, checked);
          }}
        />
        <Label htmlFor={name}>
          {required && (
            <span className='required'>
              * <span className='sr-only'>(required)</span>
            </span>
          )}
          {label}
        </Label>
      </div>
      {errors[name] && <Error name={name} />}
    </Width>
  );
};