'use client'

import { Switch as AriaSwitch } from 'react-aria-components'
import { RegisterOptions, useController, useFormContext } from 'react-hook-form'

import styles from './switch.module.css'
import { MaterialIcon } from '../Icons/MaterialIcon'
import Caption from '../Caption'

interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  name: string
  registerOptions?: RegisterOptions
}

export default function Switch({
  className,
  name,
  children,
  registerOptions,
}: React.PropsWithChildren<SwitchProps>) {
  const { control } = useFormContext()
  const { field, fieldState } = useController({
    control,
    name,
    rules: registerOptions,
  })

  return (
    <AriaSwitch
      className={`${styles.container} ${className}`}
      isSelected={field.value}
      onChange={field.onChange}
      data-testid={name}
      isDisabled={registerOptions?.disabled}
      excludeFromTabOrder
    >
      {children}
      <span className={styles.switch} tabIndex={0}></span>
      {fieldState.error ? (
        <Caption className={styles.error} fontOnly>
          <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
          {fieldState.error.message}
        </Caption>
      ) : null}
    </AriaSwitch>
  )
}