import type { ForwardedRef } from 'react';
import React, { forwardRef } from 'react';
import classNames from 'classnames';

import { Checkbox as CoreCheckbox } from '@shoptet/ui-core-web';

import type { CommonInputProps, HTMLInputProps } from '../types';

/** @inheritdoc */
export interface CheckboxProps extends CommonInputProps<boolean> {
  /**
   * Whether the checkbox is checked.
   */
  checked?: boolean;
  /**
   * Whether the checkbox is checked by default.
   * This is useful for uncontrolled components.
   */
  defaultChecked?: boolean;
  /**
   * Whether the checkbox is indeterminate.
   * This is useful for mixed states. It has no effect on the `checked` state.
   */
  indeterminate?: boolean;
  /**
   * The value of the checkbox input.
   * Rarely used for checkboxes, as checked is enough in most cases.
   * Affects the value submitted with HTML forms ('on' by default).
   */
  value?: HTMLInputProps['value'];
}

export const getCheckboxProps = <P extends CheckboxProps>({
  error,
  warning,
  checked,
  indeterminate,
  disabled,
  label,
  ...rest
}: P) => ({
  ...rest,
  label,
  type: 'checkbox',
  className: classNames('checkboxField', {
    'checkboxField--checked': checked,
    'checkboxField--indeterminate': indeterminate,
    'error-field': error,
    'warning-field': warning && !error,
  }),
  'data-disabled': disabled,
  'aria-disabled': disabled,
  disabled,
  'data-checked': checked,
  checked,
});

export const Checkbox = forwardRef(function Checkbox(
  props: CheckboxProps,
  forwardedRef: ForwardedRef<HTMLInputElement>
) {
  const {
    onChange,
    onFocus,
    onBlur,
    checked,
    defaultChecked,
    indeterminate,
    value,
    error,
    disabled,
    readOnly,
    required,
    label,
    name,
    autoFocus,
    warning: _warning,
    ...restProps
  } = props;

  const {
    className,
    'data-checked': dataChecked,
    'data-disabled': dataDisabled,
    'aria-disabled': ariaDisabled,
  } = getCheckboxProps(props);

  return (
    <CoreCheckbox
      ref={forwardedRef}
      unwrapped
      checked={checked}
      defaultChecked={defaultChecked}
      indeterminate={indeterminate}
      value={value === undefined ? undefined : String(value)}
      name={name}
      autoFocus={autoFocus}
      disabled={disabled}
      readOnly={readOnly}
      required={required}
      invalid={!!error}
      a11yLabel={label}
      onChange={onChange}
      onFocus={onFocus}
      onBlur={onBlur}
    >
      {({ props: coreInputProps }) => (
        <input
          {...restProps}
          {...coreInputProps}
          className={className}
          data-checked={dataChecked}
          data-disabled={dataDisabled}
          aria-disabled={ariaDisabled}
        />
      )}
    </CoreCheckbox>
  );
});