import React from "react";
import classNames from "classnames";
import { Action } from "../../types";
import { bemHOF } from "../../utilities/bem";
import { Box } from "../Box";
import { CloseButton } from "../CloseButton";
import { Icon, ICON_TYPE } from "../Icon";
import { Link } from "../Link";
import { Text } from "../Text";
import { useSnackbarContext } from "./context";
import {
  SnackbarProps,
  SnackbarRootProps,
  SnackbarIconProps,
  SnackbarTextProps,
} from "./types";
import { SnackbarProvider } from "./SnackbarProvider";

const cn = bemHOF("Snackbar");

export const SnackbarRoot = ({
  children,
  className,
  ...rest
}: SnackbarRootProps) => (
  <Box className={classNames(cn(), className)} {...rest}>
    {children}
  </Box>
);

export const SnackbarIcon = ({ icon }: SnackbarIconProps) => (
  <Icon
    icon={icon}
    spin={icon === ICON_TYPE.SPINNER || icon === ICON_TYPE.CIRCLE_NOTCH}
    className={cn({ e: "icon" })}
  />
);

export const SnackbarText = ({ children }: SnackbarTextProps) => (
  <Text>{children}</Text>
);

export const SnackbarAction = ({ label, onClick, href, external }: Action) => {
  const Component = typeof onClick === "function" ? "button" : "a";
  const type = Component === "button" ? "button" : undefined;

  return (
    <Link
      as={Component}
      type={type}
      className={cn({ e: "action" })}
      onClick={onClick}
      href={href}
      target={external ? "_blank" : undefined}
    >
      {label}
    </Link>
  );
};

export const SnackbarCloseButton = () => {
  const { onClose } = useSnackbarContext();

  return (
    <CloseButton
      className={classNames(cn({ e: "dismiss" }))}
      onClick={onClose}
    />
  );
};

export const Snackbar = ({
  message,
  action,
  icon,
  className,
  disableClose,
  ...rest
}: SnackbarProps) => {
  const { onClose } = useSnackbarContext();

  return (
    <SnackbarRoot className={className} {...rest}>
      {icon && <SnackbarIcon icon={icon} />}

      {message && <SnackbarText>{message}</SnackbarText>}

      {action && action.label && (
        <SnackbarAction
          {...action}
          onClick={() => {
            if (action.onClick) {
              action.onClick();
            }
            onClose();
          }}
        />
      )}

      {!disableClose && <SnackbarCloseButton />}
    </SnackbarRoot>
  );
};

Snackbar.Provider = SnackbarProvider;
Snackbar.Root = SnackbarRoot;
Snackbar.Text = SnackbarText;
Snackbar.Action = SnackbarAction;
Snackbar.CloseButton = SnackbarCloseButton;