import React, { FC, ReactNode, useContext } from 'react';
import classNames from 'classnames';
import Context from '../common/context';
import { BaseBgMode, BaseProps, LayoutContextProps, TypeMark } from '../types';

const CustomCnTag = (props) => {
  const clsPrefix = `cn-layout-page-header`;
  return (
    <div className={`${clsPrefix}-tag`}>
      <span>{props?.children}</span>
    </div>
  );
};

export interface CnLayoutHeaderProps extends BaseProps, BaseBgMode {
  /**
   * 头部标题
   */
  title?: string;
  /**
   * 头像
   */
  avatar?: { src: string };
  /**
   * 标签
   */
  label?: string | string[];
  /**
   * 描述
   */
  desc?: string;
  /**
   * 禁用底部 padding
   */
  noBottomPadding?: boolean;
  divider?: boolean;
  fullWidth?: boolean;
  children?: ReactNode;
}

export type IPageHeader = FC<CnLayoutHeaderProps> & TypeMark;

const PageHeader: IPageHeader = (props: CnLayoutHeaderProps) => {
  const {
    avatar,
    title,
    label,
    desc,
    className,
    children,
    mode,
    noBottomPadding,
    divider,
    fullWidth,
    ...others
  } = props;
  const { prefix } = useContext<LayoutContextProps>(Context);
  const clsPrefix = `${prefix}page-header`;

  const headerCls = classNames(className, clsPrefix, {
    [`${clsPrefix}--dividing`]: divider,
    [`${clsPrefix}--fullwidth`]: fullWidth,
    [`${prefix}bg--${mode}`]: !!mode,
  });

  /**
   * 标签区域
   */
  const renderTags = () => {
    if (typeof label === 'string') {
      return <CustomCnTag>{label}</CustomCnTag>;
    }
    if (Array.isArray(label) && label?.length !== 0) {
      return (
        <div className={`${clsPrefix}-tag-list`}>
          {label?.map((text) => <CustomCnTag>{text}</CustomCnTag>)}
        </div>
      );
    }
    return null;
  };

  /**
   * title 区域
   */
  const renderTitle = () => {
    return (
      <div className={`${clsPrefix}-title-wrapper`}>
        {(title || label) && (
          <div className={`${clsPrefix}-title`}>
            {title && <div className={`${clsPrefix}-title-text`}>{title}</div>}
            {renderTags()}
          </div>
        )}
        {desc && (
          <div className={`${clsPrefix}-desc`}>
            <div title={desc} className={`${clsPrefix}-desc-content`}>
              {desc}
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <header {...others} className={headerCls}>
      <div className={`${prefix}page-header-inner`}>
        <div className={`${clsPrefix}-main`}>
          {avatar && (
            <div className={`${clsPrefix}-avatar`}>
              <img className={`${clsPrefix}-avatar-img`} src={avatar?.src} />
            </div>
          )}
          {renderTitle()}
        </div>
        <div className={`${clsPrefix}-extra`}>{children}</div>
      </div>
    </header>
  );
};

PageHeader.displayName = 'Header';
PageHeader.typeMark = 'Header';
PageHeader.defaultProps = {
  noBottomPadding: false,
  divider: false,
  fullWidth: false,
  mode: 'surface',
};

export default PageHeader;