import { clsx } from 'clsx';

import Body from '../body/Body';
import CheckboxButton from '../checkboxButton';
import { Typography } from '../common';

export interface CheckboxProps {
  id?: string;
  checked?: boolean;
  required?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  label: React.ReactNode;
  secondary?: string;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onChange: (checked: boolean) => void;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
  className?: string;
}

export default function Checkbox({
  id,
  checked,
  required,
  disabled,
  readOnly,
  label,
  className,
  secondary,
  onChange,
  onFocus,
  onBlur,
}: CheckboxProps) {
  const classList = clsx(
    'np-checkbox',
    {
      checkbox: true,
      'checkbox-lg': secondary,
      'checkbox-disabled': disabled,
    },
    className,
  );

  const innerDisabled = disabled || readOnly;
  return (
    <div id={id} className={classList}>
      <label className={clsx('np-checkbox-label', { disabled })}>
        <CheckboxButton
          className="p-r-2"
          checked={checked}
          disabled={innerDisabled}
          required={!innerDisabled && required}
          onFocus={onFocus}
          onChange={() => onChange(!checked)}
          onBlur={onBlur}
        />
        <Body
          as="span"
          className="np-checkbox__text"
          type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}
        >
          <span className={required ? 'has-required' : undefined}>{label}</span>
          {secondary && <Body as="span">{secondary}</Body>}
        </Body>
      </label>
    </div>
  );
}
