import React, { ReactNode, useContext, useMemo } from "react";
import toast from "react-hot-toast";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { Flex } from "../Flex";
import { CloseButton } from "../CloseButton";
import { Icon, ICON_TYPE, StatusIcon } from "../Icon";
import { bem } from "../../utilities/bem";
import { STATUS_VARIANT } from "../../types";
import { StatusContext } from "../../contexts/status";
import { Link, LinkProps } from "../Link";
import { Heading } from "../Heading";

const cn = "Toast";
const defaultDuration = 5000;

// @Deprecated
type ToastPosition = "top-right";

export interface ToastSharedProps {
  title: string;
  content: ReactNode;
  variant?: STATUS_VARIANT;
  duration?: number;
  disableProgress?: boolean;
  className?: string;
}

export interface ToastProps extends ToastSharedProps {
  onClose: () => void;
  id?: string;
  style?: React.CSSProperties;
}

export interface ToastMessageProps {
  children: ReactNode;
  withIcon?: boolean;
  className?: string;
}

export interface ShowToastProps extends ToastSharedProps {
  position?: ToastPosition;
}

export const ToastLinkList = ({ children, className, ...rest }: BoxProps) => (
  <Box className={classNames(bem(cn, { e: "linkList" }), className)} {...rest}>
    {children}
  </Box>
);

export const ToastLink = ({ children, className, ...rest }: LinkProps) => (
  <Link
    className={classNames(bem(cn, { e: "link" }), className)}
    noStyles
    {...rest}
  >
    {children}
    <Icon icon={ICON_TYPE.ARROW_RIGHT} className={bem(cn, { e: "linkIcon" })} />
  </Link>
);

export const ToastMessage = ({
  children,
  withIcon,
  className,
}: ToastMessageProps) => {
  const variant = useContext(StatusContext);

  return (
    <Box className={classNames(bem(cn, { e: "message" }), className)}>
      {withIcon ? (
        <>
          <StatusIcon status={variant} className={bem(cn, { e: "icon" })} />
          <Box>{children}</Box>
        </>
      ) : (
        <Box>{children}</Box>
      )}
    </Box>
  );
};

export const Toast = ({
  title,
  onClose,
  content,
  duration = defaultDuration,
  variant = STATUS_VARIANT.DEFAULT,
  disableProgress = false,
  className,
  style,
  id,
  ...rest
}: ToastProps) => {
  const componentId = "toast";

  const statusValue = useMemo(() => variant, [variant]);

  const durationCustomProperty = useMemo(() => {
    return {
      "--ads-toast-duration": `${duration}ms`,
    } as React.CSSProperties;
  }, [duration]);

  return (
    <StatusContext.Provider value={statusValue}>
      <Box
        id={`${componentId}-${id}`}
        data-component={componentId}
        className={classNames(bem(cn), bem(cn, { m: variant }), className)}
        {...rest}
      >
        <CloseButton
          className={bem(cn, { e: "closeButton" })}
          aria-label="Dismiss message"
          onClick={onClose}
        />

        <Flex className={bem(cn, { e: "body" })}>
          {title && (
            <Heading.H4 className={bem(cn, { e: "title" })}>{title}</Heading.H4>
          )}
          {content && (
            <Box className={bem(cn, { e: "content" })}>{content}</Box>
          )}
        </Flex>

        <Box
          className={classNames(
            bem(cn, { e: "progressBar" }),
            bem(cn, { e: "progressBar", m: variant }),
            !disableProgress && bem(cn, { e: "progressBar", m: "animated" }),
          )}
          style={{
            ...style,
            ...durationCustomProperty,
          }}
        />
      </Box>
    </StatusContext.Provider>
  );
};

export const showToast = ({
  position = "top-right",
  duration = defaultDuration,
  variant = STATUS_VARIANT.DEFAULT,
  disableProgress = false,
  title,
  content,
  className,
  ...rest
}: ShowToastProps) => {
  const options = {
    position,
    duration,
  };

  return toast.custom(
    (t) => (
      <Toast
        {...{
          title,
          onClose: () => toast.dismiss(t.id),
          content,
          variant,
          disableProgress,
          className: classNames(
            t.visible ? "animate-toast-enter" : "animate-toast-leave",
            className,
          ),
          id: t.id,
          duration,
          ...rest,
        }}
      />
    ),
    options,
  );
};

Toast.Link = ToastLink;
Toast.LinkList = ToastLinkList;
Toast.Message = ToastMessage;