import React, { ReactElement } from 'react';
import classNames from 'classnames';
import { Iconfont } from '../Iconfont/Iconfont';
import { PageTitle } from '../PageLayout/PageTitle';
import { PageContent } from '../PageLayout/PageContent';
import { PageControlLeft } from './PageControlLeft';
import { PageControlRight } from './PageControlRight';

const stylePrefix = 'jad-page-layout';

export class PageLayout extends React.Component<{ 
  ifBackShow?: boolean,
  isHeaderHide?: boolean
}> {
  public back = () => {
    history.back();
  };
  public render() {
    const { children, ifBackShow,isHeaderHide } = this.props;
    const title = React.Children.toArray(children).find(
      (e: ReactElement<any>) => {
        return e.type === PageTitle;
      }
    );
    const content = React.Children.toArray(children).find(
      (e: ReactElement<any>) => {
        return e.type === PageContent;
      }
    );
    const controlLeft = React.Children.toArray(children).find(
      (e: ReactElement<any>) => {
        return e.type === PageControlLeft;
      }
    );
    const controlRight = React.Children.toArray(children).find(
      (e: ReactElement<any>) => {
        return e.type === PageControlRight;
      }
    );

    const backBtn = (
      <React.Fragment>
        <span className={`${stylePrefix}-back`} onClick={this.back}>
          <Iconfont
            type="icon-fanhui"
            className={classNames('mr10', `${stylePrefix}-icon-back`)}
          />
          <span>返回</span>
        </span>

        <div className={`${stylePrefix}-divider`} />
      </React.Fragment>
    );

    const pageControl =
      controlLeft || controlRight ? (
        <div className="mb20 flex flex-jcsb">
          <div>{controlLeft}</div>
          <div>{controlRight}</div>
        </div>
      ) : (
        ''
      );

    const pageHeader = isHeaderHide? "" :(
      <div className={`${stylePrefix}-head`}>
          {ifBackShow && backBtn} {title}
        </div>
    )

    return (
      <div>
        {pageHeader}
        <div className={classNames(`${stylePrefix}-content`,isHeaderHide?'headerHide':'')}>
          <div className="p20">
            {pageControl}
            <div>{content}</div>
          </div>
        </div>
      </div>
    );
  }
}