import React, { ChangeEventHandler, ForwardedRef, forwardRef } from 'react'

export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {
  id: string
  hasTile?: boolean
  disabled?: boolean
  label?: string
  checkHelptext?: string
  hasError?: boolean
  defaultChecked?: boolean
  checked?: boolean
  value?: string
  isSwitch?: boolean
  hideLabel?: boolean
  labelPosition?: 'right' | 'left'
  optionalTag?: boolean
  optionalText?: string
  requiredTag?: boolean
  requiredText?: string
  tagText?: string | null
  onChange?: ChangeEventHandler<HTMLInputElement>
}

export const PktCheckbox = forwardRef(
  (
    {
      id,
      hasTile = false,
      disabled = false,
      label,
      checkHelptext,
      hasError = false,
      className,
      isSwitch = false,
      hideLabel = false,
      labelPosition = 'right',
      defaultChecked,
      checked,
      optionalTag,
      optionalText = 'Valgfritt',
      requiredTag,
      requiredText = 'Må fylles ut',
      tagText,
      ...props
    }: IPktCheckbox,
    ref: ForwardedRef<HTMLInputElement>,
  ): React.ReactElement => {
    const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')

    const labelClasses = [
      'pkt-input-check__input-label',
      disabled ? 'pkt-input-check__input-label--disabled' : '',
      `pkt-input-check__input-label--${labelPosition}`,
      hideLabel ? 'pkt-sr-only' : '',
    ]
      .filter(Boolean)
      .join(' ')

    const inputTileClasses = [
      'pkt-input-check__input',
      hasTile ? 'pkt-input-check__input--tile' : '',
      disabled && hasTile ? 'pkt-input-check__input--tile-disabled' : '',
    ]
      .filter(Boolean)
      .join(' ')

    const tagClasses = ['pkt-tag', 'pkt-tag--small', 'pkt-tag--thin-text'].join(' ')

    const renderTags = () => {
      return (
        <>
          {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
        </>
      )
    }

    return (
      <div className={classes}>
        <div className={inputTileClasses}>
          {labelPosition === 'left' && (
            <label className={labelClasses} htmlFor={id}>
              {label} {renderTags()}
              {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
            </label>
          )}
          <input
            role={isSwitch ? 'switch' : 'checkbox'}
            ref={ref}
            className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
            type="checkbox"
            id={id}
            disabled={disabled}
            {...(checked !== undefined ? { checked } : { defaultChecked })}
            {...props}
          />
          {labelPosition === 'right' && (
            <label className={labelClasses} htmlFor={id}>
              {label} {renderTags()}
              {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
            </label>
          )}
        </div>
      </div>
    )
  },
)

PktCheckbox.displayName = 'PktCheckbox'