import React, { forwardRef } from "react";
import classNames from "classnames";
import { StatusContext } from "../../contexts/status";
import { Box, BoxProps } from "../Box";
import { Heading, HeadingProps } from "../Heading";
import { bemHOF } from "../../utilities/bem";
import { STATUS_VARIANT } from "../../types";
import {
  CUSTOM_ICON_TYPE,
  Icon,
  ICON_STYLE_PREFIX,
  ICON_TYPE,
  StatusIcon,
  StatusIconProps,
} from "../Icon";
import { Flex } from "../Flex";
import { CloseButton, CloseButtonProps } from "../CloseButton";

const cn = bemHOF("Banner");

interface SharedBannerRootProps extends BoxProps {
  variant?: STATUS_VARIANT;
}

// @deprecated
export interface BannerProps extends SharedBannerRootProps {
  title?: string;
  withIcon?: boolean;
  icon?: ICON_TYPE | CUSTOM_ICON_TYPE;
  iconPrefix?: ICON_STYLE_PREFIX;
}

export interface BannerRootProps extends SharedBannerRootProps {
  children: React.ReactNode;
}

const BannerRoot = forwardRef<HTMLDivElement, BannerRootProps>(
  function BannerRoot(props, ref) {
    const {
      children,
      variant = STATUS_VARIANT.DEFAULT,
      className,
      ...rest
    } = props;

    return (
      <StatusContext.Provider value={variant}>
        <Flex
          ref={ref}
          data-component="banner"
          className={classNames(cn(), cn({ m: variant }), className)}
          role="alert"
          {...rest}
        >
          {children}
        </Flex>
      </StatusContext.Provider>
    );
  },
);

export interface BannerIconProps extends StatusIconProps {
  icon?: ICON_TYPE | CUSTOM_ICON_TYPE;
  iconPrefix?: ICON_STYLE_PREFIX;
}

const BannerIcon = forwardRef<HTMLSpanElement, BannerIconProps>(
  function BannerIcon(props, ref) {
    const { icon, iconPrefix, className, ...rest } = props;
    if (icon) {
      return (
        <Icon
          ref={ref}
          icon={icon}
          className={classNames(cn({ e: "icon" }), className)}
          prefix={iconPrefix}
          {...rest}
        />
      );
    }

    return (
      <StatusIcon
        ref={ref}
        className={classNames(cn({ e: "icon" }), className)}
        {...rest}
      />
    );
  },
);

export type BannerContentStackProps = BoxProps;

const BannerContentStack = forwardRef<HTMLDivElement, BannerContentStackProps>(
  function BannerContentStack({ children, className, ...props }, ref) {
    return (
      <Flex
        ref={ref}
        className={classNames("flex-col gap-y-1 w-full", className)}
        {...props}
      >
        {children}
      </Flex>
    );
  },
);

export type BannerTitleProps = HeadingProps;

const BannerTitle = forwardRef<HTMLHeadingElement, BannerTitleProps>(
  function BannerTitle({ children, ...props }, ref) {
    return (
      <Heading.H5 ref={ref} {...props}>
        {children}
      </Heading.H5>
    );
  },
);

export type BannerBodyProps = BoxProps;

const BannerBody = forwardRef<HTMLDivElement, BannerBodyProps>(
  function BannerBody({ children, className, ...props }, ref) {
    return (
      <Box className={classNames("w-full", className)} ref={ref} {...props}>
        {children}
      </Box>
    );
  },
);

export type BannerDismissProps = CloseButtonProps;

const BannerDismiss = forwardRef<HTMLButtonElement, CloseButtonProps>(
  function BannerDismiss({ className, ...props }, ref) {
    return (
      <CloseButton
        ref={ref}
        className={classNames([
          "text-gray-800 hover:text-gray-700",
          "flex-shrink-0",
          "text-h5",
          className,
        ])}
        {...props}
      />
    );
  },
);

/**
 * @deprecated
 * Usage of Banner is deprecated. Please review the docs on how to
 * create a banner using composition. In your consuming app, you may
 * want to recreate a similar composed banner component.
 */
const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
  props,
  ref,
) {
  const {
    variant = STATUS_VARIANT.DEFAULT,
    title,
    className,
    children,
    withIcon = false,
    icon,
    iconPrefix,
    ...rest
  } = props;

  return (
    <BannerRoot ref={ref} className={className} variant={variant} {...rest}>
      {(withIcon || icon) && <BannerIcon icon={icon} iconPrefix={iconPrefix} />}

      {title ? (
        <BannerContentStack>
          <BannerTitle>{title}</BannerTitle>
          <BannerBody>{children}</BannerBody>
        </BannerContentStack>
      ) : (
        <BannerBody>{children}</BannerBody>
      )}
    </BannerRoot>
  );
});

const CompoundBanner = Object.assign(Banner, {
  Root: BannerRoot,
  Icon: BannerIcon,
  ContentStack: BannerContentStack,
  Title: BannerTitle,
  Body: BannerBody,
  Dismiss: BannerDismiss,
});

export { CompoundBanner as Banner };