import * as React from 'react';
import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';

export type RadioTickBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
  /**
   * Should the component occupy the whole width of its parent?
   */
  block?: boolean,
  /**
   * Does the component need to conserve space?
   */
  compact?: boolean,
  /**
   * Complementary content of the component.
   */
  subtext?: React.ReactNode,
}

/**
 * Component for performing an action upon activation (e.g. when clicked).
 *
 * This component functions as a regular button.
 */
export const RadioTickBox = React.forwardRef<HTMLInputElement, RadioTickBoxProps>(
  (
    {
      children,
      block = false,
      compact = false,
      subtext,
      className: _className,
      as: _as,
      ...etcProps
    }: RadioTickBoxProps,
    ref,
  ) => {
    const styleProps = React.useMemo<CheckControlBase.CheckControlBaseArgs>(() => ({
      block,
      compact,
      appearance: CheckControlBase.CheckControlAppearance.TICK_BOX,
      type: CheckControlBase.CheckControlType.RADIO,
      uncheckedLabel: false,
    }), [block, compact]);

    return (
      <div
        className={CheckControlBase.ClickAreaWrapper(styleProps)}
      >
        <label
          className={CheckControlBase.ClickArea()}
        >
          <input
            {...etcProps}
            type="radio"
            ref={ref}
            className={CheckControlBase.CheckStateContainer(styleProps)}
          />
          <span>
            <span />
            <span
              className={CheckControlBase.CheckIndicatorArea(styleProps)}
            >
              <span
                className={CheckControlBase.CheckIndicatorWrapper(styleProps)}
              />
            </span>
            <span>
              {children}
              {
                subtext
                && (
                  <>
                    <br />
                    <span
                      className={CheckControlBase.Subtext()}
                      data-testid="subtext"
                    >
                      {subtext}
                    </span>
                  </>
                )
              }
            </span>
          </span>
        </label>
      </div>
    );
  },
);

RadioTickBox.displayName = 'ActionButton';