/**
 * This Source Code is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * Copyright (c) Infonomic Company Limited
 */

import type { CheckboxField as FieldType } from '@byline/core'
import { Checkbox } from '@byline/ui/react'

import { useFieldError, useFieldValue } from '../../forms/form-context'
import { useScopedDomId } from '../../forms/form-dom-scope'
import styles from './checkbox-field.module.css'

export const CheckboxField = ({
  field,
  value,
  defaultValue,
  onChange,
  id,
  path,
}: {
  field: FieldType
  value?: boolean
  defaultValue?: boolean
  onChange?: (value: boolean) => void
  id?: string
  path?: string
}) => {
  const fieldPath = path ?? field.name
  const htmlId = useScopedDomId(fieldPath, id)
  const fieldError = useFieldError(fieldPath)
  const fieldValue = useFieldValue<boolean | undefined>(fieldPath)
  const checked = value ?? fieldValue ?? defaultValue ?? false

  return (
    <div className={`byline-field-checkbox ${field.name} ${styles['field-checkbox']}`}>
      <Checkbox
        disabled={field.readOnly}
        id={htmlId}
        name={field.name}
        label={field.label}
        checked={checked}
        size="sm"
        helpText={field.helpText}
        // TODO: Handle indeterminate state
        onCheckedChange={(value: boolean | 'indeterminate') => {
          const next = value === 'indeterminate' ? false : Boolean(value)
          onChange?.(next)
        }}
        error={fieldError != null}
        errorText={fieldError}
      />
    </div>
  )
}