import React, { ReactNode } from "react";
import classNames from "classnames";
import { BlankSteps } from "./BlankSteps";
import { MediaObject } from "../mediaobject";
import { StyledProps } from "../_type/StyledProps";
import { useConfig } from "../_util/config-context";
import { H4 } from "../heading";
import { warn } from "../_util/warn";
import { forwardRefWithStatics } from "../_util/forward-ref-with-statics";

export interface BlankTheme {
  image: { background: string; gif: string };
}

export interface BlankProps extends StyledProps {
  /**
   * 预置主题
   *
   * **\[Deprecated\]** 新版空白页已不包含预置主题，请使用 `image` 属性进行定制
   *
   * @deprecated
   */
  theme?: "error" | "open" | "arrears" | "permission" | BlankTheme;

  /**
   * 图片 URL
   * @since 2.4.0
   */
  image?: { background: string; logo: string };

  /**
   * 标题
   */
  title?: React.ReactNode;

  /**
   * 描述
   *
   * **\[Deprecated\]** 新版空白页已不包含描述区域
   *
   * @deprecated
   */
  description?: React.ReactNode;

  /**
   * 操作区
   */
  operation?: React.ReactNode;

  /**
   * 操作区下方内容
   */
  extra?: React.ReactNode;

  /**
   * 描述与操作区间内容
   */
  children?: React.ReactNode;

  /**
   * 底部区域内容
   */
  bottom?: React.ReactNode | React.ReactNode[];
}

export const Blank = forwardRefWithStatics(
  function Blank(
    {
      theme,
      image,
      title,
      description,
      operation,
      extra,
      children,
      bottom,
      className,
      ...props
    }: BlankProps,
    ref: React.Ref<HTMLDivElement>
  ) {
    const { classPrefix } = useConfig();

    if (!theme || image) {
      if (bottom && !Array.isArray(bottom)) {
        // eslint-disable-next-line no-param-reassign
        bottom = [bottom];
      }
      return (
        <div
          ref={ref}
          className={classNames(
            `${classPrefix}-card`,
            `${classPrefix}-blank-page-v2`,
            className
          )}
          {...props}
        >
          <div className={`${classPrefix}-blank-page-v2__main`}>
            <div className={`${classPrefix}-blank-page-v2__content`}>
              {image.logo && (
                <div className={`${classPrefix}-blank-page-v2__logo`}>
                  <img src={image.logo} alt="logo" />
                </div>
              )}
              <div className={`${classPrefix}-blank-page-v2__title`}>
                <h2 className={`${classPrefix}-blank-page-v2__title-zh`}>
                  {title}
                </h2>
              </div>
              {children}
              <div className={`${classPrefix}-blank-page-v2__opreate`}>
                {operation}
                {extra && <div className={`${classPrefix}-mt-4n`}>{extra}</div>}
              </div>
            </div>
            <div
              className={`${classPrefix}-blank-page-v2__picture`}
              style={{ backgroundImage: `url(${image.background})` }}
            />
          </div>
          {bottom && (
            <div className={`${classPrefix}-blank-page-v2__relative`}>
              <div className={`${classPrefix}-blank-page-v2__relative-inner`}>
                {(bottom as ReactNode[]).map((item, index) => (
                  <p
                    key={index}
                    className={`${classPrefix}-blank-page-v2__relative-item`}
                  >
                    {item}
                  </p>
                ))}
              </div>
            </div>
          )}
        </div>
      );
    }

    warn("当前 Blank 组件包含将废弃的属性，请尽快升级至最新用法");

    const { image: themeImage } = getCustomTheme(theme);
    return (
      <div
        ref={ref}
        className={classNames(
          `${classPrefix}-blank-page`,
          {
            "default-error": theme === "error",
            "default-open": theme === "open",
            "default-arrears": theme === "arrears",
            "default-permission": theme === "permission",
          },
          className
        )}
        {...props}
      >
        <MediaObject
          align="middle"
          media={
            <div className={`${classPrefix}-blank-page__media`}>
              <span className={`${classPrefix}-blank-page__media-bg`}>
                {themeImage.background && (
                  <img src={themeImage.background} alt="" />
                )}
              </span>
              <span className={`${classPrefix}-blank-page__media-gif`}>
                {themeImage.gif && <img src={themeImage.gif} alt="" />}
              </span>
            </div>
          }
        >
          <H4 className={`${classPrefix}-mb-2n`}>{description}</H4>
          {children}
          {(operation || extra) && (
            <div className={`${classPrefix}-blank-page__op`}>
              {operation}
              {extra && <div className={`${classPrefix}-mt-4n`}>{extra}</div>}
            </div>
          )}
        </MediaObject>
      </div>
    );
  },
  {
    Steps: BlankSteps,
  }
);

Blank.displayName = "Blank";

function getCustomTheme(theme: BlankProps["theme"]): BlankTheme {
  if (typeof theme === "string") {
    return { image: { background: null, gif: null } };
  }
  return {
    image: {},
    ...theme,
  };
}