import type { ReactNode } from "react";
import "./banner.css";

export type BannerType = "slim" | "single-action-inline" | "single-action" | "input";
export type BannerSize = "floating" | "full-width";
export type BannerColor = "brand" | "grey" | "brand-light";
export type BannerContent = "title" | "title-description";
export type BannerDirection = "ltr" | "rtl";

export type BannerProps = {
  actionLabel?: string;
  ariaLabel?: string;
  className?: string;
  closeLabel?: string;
  color?: BannerColor;
  content?: BannerContent;
  dir?: BannerDirection;
  description?: string;
  icon?: ReactNode;
  inputAriaLabel?: string;
  inputPlaceholder?: string;
  linkLabel?: string;
  onAction?: () => void;
  onClose?: () => void;
  showIcon?: boolean;
  showInlineAction?: boolean;
  size?: BannerSize;
  title?: string;
  type?: BannerType;
};

function MegaphoneIcon() {
  return (
    <svg aria-hidden="true" className="ds-banner__icon" viewBox="0 0 24 24">
      <path d="M3 10.5v3a2.5 2.5 0 0 0 2.5 2.5h.63l1.15 3.44A1.5 1.5 0 0 0 8.7 20.5h1.1a1 1 0 0 0 .95-1.32L9.7 16H11l7.24 3.1A1.25 1.25 0 0 0 20 17.95V6.05a1.25 1.25 0 0 0-1.76-1.14L11 8H5.5A2.5 2.5 0 0 0 3 10.5Zm15 6.69-6-2.58V9.39l6-2.58v10.38ZM5 10.5A.5.5 0 0 1 5.5 10H10v4H5.5a.5.5 0 0 1-.5-.5v-3Z" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg aria-hidden="true" className="ds-banner__close-icon" viewBox="0 0 24 24">
      <path d="m12 10.59 5.3-5.3 1.41 1.42-5.3 5.29 5.3 5.3-1.41 1.41-5.3-5.3-5.29 5.3-1.42-1.41 5.3-5.3-5.3-5.29 1.42-1.42 5.29 5.3Z" />
    </svg>
  );
}

function cx(...classes: Array<string | false | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function Banner({
  actionLabel,
  ariaLabel,
  className = "",
  closeLabel,
  color = "brand",
  content = "title",
  description,
  dir = "ltr",
  icon,
  inputAriaLabel,
  inputPlaceholder,
  linkLabel,
  onAction,
  onClose,
  showIcon = true,
  showInlineAction,
  size = "floating",
  title,
  type = "slim",
}: BannerProps) {
  const hasDescription = content === "title-description" && Boolean(title || description);
  const titleOnlyMessage = title ?? description;
  const isInlineAction = type === "slim" || type === "single-action-inline";
  const inlineActionLabel = type === "single-action-inline" ? actionLabel : linkLabel;
  const hasInlineAction = isInlineAction && (showInlineAction ?? true) && Boolean(inlineActionLabel);
  const closeButton = (
    <button className="ds-banner__close" onClick={onClose} type="button" aria-label={closeLabel}>
      <CloseIcon />
    </button>
  );

  return (
    <section
      aria-label={ariaLabel}
      className={cx(
        "ds-banner",
        `ds-banner--${type}`,
        `ds-banner--${size}`,
        `ds-banner--${color}`,
        `ds-banner--${content}`,
        dir === "rtl" && "ds-banner--rtl",
        className,
      )}
      dir={dir}
    >
      <div className="ds-banner__main">
        <div className="ds-banner__leading">
          {showIcon && <span className="ds-banner__icon-wrap">{icon ?? <MegaphoneIcon />}</span>}
          {hasDescription ? (
            <span className="ds-banner__message">
              {title && <strong className="ds-banner__title">{title}</strong>}
              {title && description && <span className="ds-banner__separator">{"\u00b7"}</span>}
              {description && <span className="ds-banner__description">{description}</span>}
            </span>
          ) : titleOnlyMessage ? (
            <span className="ds-banner__title-only">{titleOnlyMessage}</span>
          ) : null}
        </div>

        {hasInlineAction && (
          <button className="ds-banner__link" onClick={onAction} type="button">
            {inlineActionLabel}
          </button>
        )}
      </div>

      {type === "single-action" && (
        <div className="ds-banner__tail">
          {actionLabel && (
            <button className="ds-banner__action" onClick={onAction} type="button">
              {actionLabel}
            </button>
          )}
          {closeButton}
        </div>
      )}

      {type === "input" && (
        <div className="ds-banner__tail ds-banner__tail--input">
          <input aria-label={inputAriaLabel} className="ds-banner__input" placeholder={inputPlaceholder} type="text" />
          {actionLabel && (
            <button className="ds-banner__action" onClick={onAction} type="button">
              {actionLabel}
            </button>
          )}
          {closeButton}
        </div>
      )}

      {isInlineAction && closeButton}
    </section>
  );
}
