import type { CallButtonProps } from "@shared/components/call-button/types";
import { Link } from "@shared/components/link";
import { MaterialIcon } from "@shared/components/material-icon";
import type { IconProps } from "@shared/components/material-icon/types";
import { cx } from "@shared/utils";

export const CallButton = (props: CallButtonProps) => {
  const {
    showBlinkDot = false,
    buttonStyle = "primary",
    size = "md",
    children,
    className,
    prefix,
    containerClassName,
    ...rest
  } = props;

  const baseClasses =
    "relative flex items-center gap-2 font-medium tracking-wide outline-offset-4 rounded-full";

  const sizeClasses = {
    sm: "h-6 text-xs pl-1 pr-2",
    md: "h-8 text-sm pl-1 pr-2",
    lg: "h-10 text-base pl-2 pr-3",
  };

  const styleClasses = {
    primary: "border-[0.727px] border-border text-text",
  };

  const iconSize: Record<string, IconProps["size"]> = {
    sm: 20,
    md: 20,
    lg: 32,
  };

  const iconContainerSize = {
    sm: "h-5 w-5",
    md: "h-6 w-6",
    lg: "h-8 w-8",
  };

  const dotSize = {
    sm: "h-2 w-2",
    md: "h-3 w-3",
    lg: "h-4 w-4",
  };

  const dotPosition = {
    sm: "-left-4",
    md: "-left-6",
    lg: "-left-8",
  };

  const pill = (
    <Link
      {...rest}
      className={cx(
        baseClasses,
        sizeClasses[size],
        styleClasses[buttonStyle],
        className
      )}
    >
      {showBlinkDot ? (
        <span
          className={`pointer-events-none absolute animate-blink ${dotPosition[size]} top-1/2 ${dotSize[size]} -translate-y-1/2 rounded-full bg-icon-brand`}
        />
      ) : null}
      <span
        className={cx(
          "relative inline-flex items-center justify-center rounded-full bg-icon-brand",
          iconContainerSize[size]
        )}
      >
        <MaterialIcon
          name="call"
          fill={1}
          size={iconSize[size]}
          className="text-white"
        />
      </span>
      <span className="font-normal tracking-wide">{children}</span>
    </Link>
  );

  if (prefix == null || prefix === false || prefix === "") {
    return pill;
  }

  return (
    <span className={cx("flex items-center gap-2", containerClassName)}>
      {typeof prefix === "string" || typeof prefix === "number" ? (
        <span className="text-sm font-normal text-text">{prefix}</span>
      ) : (
        prefix
      )}
      {pill}
    </span>
  );
};

CallButton.displayName = "CallButton";

export type { CallButtonProps };