"use client"

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

import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import styles from "./switch.module.css"

import type { SwitchProps } from "@/types/components/switch"

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>
  )
}