import cx from "classnames";
import React from "react";

import { BlockAction } from "../../BlockAction";
import { Checkbox } from "../Checkbox";
import { Label } from "../Label";
import { Radio } from "../Radio";

const CLASS_ROOT = "selection-tile";

export type SelectionTileStatus = "warning" | "error";

type SelectionTileInputProps = Omit<
  React.InputHTMLAttributes<HTMLInputElement>,
  | "type"
  | "id"
  | "name"
  | "value"
  | "disabled"
  | "size"
  | "checked"
  | "defaultChecked"
>;

interface SelectionTileBaseProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
  id: string;
  price?: React.ReactNode;
  message?: React.ReactNode;
  value?: string;
  isChecked?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  status?: SelectionTileStatus;
  children?: React.ReactNode;
}

type SelectionTileControlProps =
  | { type: "radio"; name: string }
  | { type: "checkbox"; name?: string };

type SelectionTileAccessibleNameProps =
  | {
      label: string | number | React.ReactElement;
      inputProps?: SelectionTileInputProps;
    }
  | {
      label?: never;
      inputProps: SelectionTileInputProps &
        ({ "aria-label": string } | { "aria-labelledby": string });
    };

export type SelectionTileProps = SelectionTileBaseProps &
  SelectionTileControlProps &
  SelectionTileAccessibleNameProps;

const SelectionTile: React.FC<SelectionTileProps> = ({
  type,
  id,
  label,
  price,
  message,
  name,
  value,
  isChecked,
  isDisabled,
  isInvalid,
  status,
  inputProps,
  className,
  children,
  ...other
}) => {
  const invalid = isInvalid || status === "error";
  const inputClassName = cx("radiocheck--fill", inputProps?.className);
  const messageElementId =
    React.isValidElement<{ id?: string }>(message) && message.props.id
      ? message.props.id
      : undefined;
  const hasMessage =
    message !== null && message !== undefined && message !== false;
  const messageId = hasMessage
    ? messageElementId || `${id}-message`
    : undefined;
  const describedBy = inputProps?.["aria-describedby"] || messageId;
  const controlProps = {
    ...inputProps,
    id,
    name,
    value,
    isChecked,
    isDisabled,
    isInvalid: invalid,
    "aria-invalid": invalid || undefined,
    "aria-describedby": describedBy,
    className: inputClassName,
  };
  const control =
    type === "radio" ? (
      <Radio {...controlProps} name={name} />
    ) : (
      <Checkbox {...controlProps} />
    );

  return (
    <BlockAction
      className={cx(
        CLASS_ROOT,
        {
          [`${CLASS_ROOT}--${status}`]: status,
          [`${CLASS_ROOT}--invalid`]: invalid,
        },
        className,
      )}
      {...other}
    >
      <div>
        <div className={`${CLASS_ROOT}__control`}>{control}</div>
        <div className={`${CLASS_ROOT}__body`}>
          {label !== undefined && (
            <Label htmlFor={id} className={`${CLASS_ROOT}__label`}>
              {label}
            </Label>
          )}
          {price !== undefined && (
            <div className="caption text-accent bold">{price}</div>
          )}
          {hasMessage && (
            <div
              id={messageElementId ? undefined : messageId}
              className={`${CLASS_ROOT}__message`}
            >
              {message}
            </div>
          )}
          {children}
        </div>
      </div>
    </BlockAction>
  );
};

SelectionTile.displayName = "SelectionTile";

export { SelectionTile };