import React from "react";
import classNames from "classnames";
import { InferProps, StyledProps } from "../_type";
import { createRocket } from "../_util/create-rocket";
import { Icon } from "../icon";
import { Justify } from "../justify";
import { H2 } from "../heading";
import { useConfig } from "../_util/config-context";

/**
 * @deprecated
 *
 * 请使用 Layout 组件代替
 */
export const ContentView = Object.assign(
  createRocket("ContentView", "div.@{prefix}-content"),
  {
    Header: ContentViewHeader,
    Body: ContentViewBody,
  }
);

export interface ContentViewProps extends InferProps<typeof ContentView> {}

export interface ContentViewHeaderProps extends StyledProps {
  /**
   * 是否展示返回按钮
   *
   * @default false
   */
  showBackButton?: boolean;

  /**
   * 返回按钮点击回调
   */
  onBackButtonClick?: (event: React.MouseEvent) => void;

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

  /**
   * 小标题（说明文字）
   */
  subtitle?: React.ReactNode;

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

  /**
   * 自定义渲染头部内容
   *
   * **此时不会渲染返回按钮、标题、操作区等内容**
   */
  children?: React.ReactNode;
}

export function ContentViewHeader({
  showBackButton,
  onBackButtonClick = () => null,
  title,
  subtitle,
  operation,
  children,
  className,
  style,
}: ContentViewHeaderProps) {
  const { classPrefix } = useConfig();

  if (children) {
    return (
      <div
        className={classNames(`${classPrefix}-content__header`, className)}
        style={style}
      >
        {children}
      </div>
    );
  }

  return (
    <div
      className={classNames(`${classPrefix}-content__header`, className)}
      style={style}
    >
      <Justify
        left={
          <>
            {showBackButton && (
              <a
                className={`${classPrefix}-content__header-back`}
                onClick={onBackButtonClick}
              >
                <Icon type="btnback" />
              </a>
            )}
            <H2>{title}</H2>
            <span className={`${classPrefix}-content-header__text`}>
              {subtitle}
            </span>
          </>
        }
        right={operation}
      />
    </div>
  );
}

export interface ContentViewBodyProps extends StyledProps {
  /**
   * 是否为全屏
   * @default false
   */
  full?: boolean;

  /**
   * 侧边导航
   */
  sidebar?: React.ReactNode;

  /**
   * 内容
   */
  children?: React.ReactNode;
}

function ContentViewBody({
  full,
  sidebar,
  children,
  className,
  style,
}: ContentViewBodyProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-content__body`, className, {
        "has-subsidebar": sidebar,
      })}
      style={style}
    >
      <div
        className={classNames(`${classPrefix}-content__inner`, {
          [`${classPrefix}-content__inner--full`]: full,
        })}
      >
        {sidebar && <div className={`${classPrefix}-sidebar`}>{sidebar}</div>}
        {children}
      </div>
    </div>
  );
}