import React, { forwardRef } 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 { useConfig } from "../_util/config-context";

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

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

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

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

  /**
   * 标题后区域内容
   */
  children?: React.ReactNode;

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

export const LayoutContentHeader = forwardRef(function LayoutContentHeader(
  {
    showBackButton,
    onBackButtonClick = () => null,
    title,
    subtitle,
    children,
    operation,
    className,
    ...props
  }: LayoutContentHeaderProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-layout__content-header`, className)}
      {...props}
    >
      <div className={`${classPrefix}-layout__header-title`}>
        <Justify
          left={
            <>
              {showBackButton && (
                <a
                  className={`${classPrefix}-content__header-back`}
                  onClick={onBackButtonClick}
                >
                  <Icon type="btnback" />
                </a>
              )}
              <h2 className={`${classPrefix}-h2`}>{title}</h2>
              {children}
              {subtitle && (
                <span className={`${classPrefix}-layout__header-text`}>
                  {subtitle}
                </span>
              )}
            </>
          }
          right={operation}
        />
      </div>
    </div>
  );
});

LayoutContentHeader.displayName = "LayoutContentHeader";

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

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

export const LayoutContentBody = forwardRef(function LayoutContentBody(
  { full, children, className, ...props }: LayoutContentBodyProps,
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-layout__content-body`, className)}
      {...props}
    >
      <div
        className={classNames(`${classPrefix}-layout__content-body-inner`, {
          [`${classPrefix}-layout__content-body-inner--full`]: full,
        })}
      >
        {children}
      </div>
    </div>
  );
});

LayoutContentBody.displayName = "LayoutContentBody";

const LayoutContentFooter = createRocket(
  "LayoutContentFooter",
  "div.@{prefix}-layout__content-footer"
);

export const LayoutContent = Object.assign(
  createRocket(
    "LayoutContent",
    "main.@{prefix}-layout__content",
    "div.@{prefix}-layout__content-inner"
  ),
  {
    Header: LayoutContentHeader,
    Body: LayoutContentBody,
    Footer: LayoutContentFooter,
  }
);

export interface LayoutContentProps extends InferProps<typeof LayoutContent> {}