import React from "react";
import classNames from "classnames";
import styles from "./ActionTile.module.css";
import { Icon } from "@arc-ui/components/Icon";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import { BtIconTickAlt2Px } from "@arc-ui/icons/BtIconTickAlt2Px";

export const ActionTile: React.FC<ActionTileProps> = ({
  icon,
  activeIcon,
  heading,
  isCompact = false,
  isActive = false,
  onClick,
  ...props
}) => {
  const displayIcon = isActive && activeIcon ? activeIcon : icon;
  const iconSize = isCompact ? 40 : 48;

  const content = (
    <>
      <div
        className={classNames(styles["action-tile-content"], {
          [styles["action-tile-content--without-icon"]]: !displayIcon,
        })}
      >
        {displayIcon && (
          <div className={styles["action-tile-icon"]}>
            <Icon icon={displayIcon} size={iconSize} />
          </div>
        )}
        <span className={styles["action-tile-heading"]}>{heading}</span>
      </div>

      {isActive && (
        <div className={styles["action-tile-tick"]}>
          <Icon icon={BtIconTickAlt2Px} size={28} />
        </div>
      )}
    </>
  );

  return (
    <button
      type="button"
      className={classNames(styles["action-tile"], {
        [styles["action-tile--active"]]: isActive,
        [styles["action-tile--compact"]]: isCompact,
      })}
      onClick={onClick}
      aria-pressed={isActive}
      {...filterAttrs(props)}
    >
      {content}
    </button>
  );
};

export interface ActionTileProps {
  /**
   * Icon to display in default state
   */
  icon?: string;

  /**
   * Filled icon variant to display when tile is active. Falls back to icon if not provided
   */
  activeIcon?: string;

  /**
   * Heading text (required)
   */
  heading: string;

  /**
   * Whether to use the compact tile variant
   */
  isCompact?: boolean;

  /**
   * Whether the tile is in active/selected state
   */
  isActive?: boolean;

  /**
   * Click handler
   */
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}