import React from 'react';
import { Typography } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import useRoute from '@/utils/hooks/useRoute';
import { ArrowLeftOutlined } from '@ant-design/icons';


const pageStyle = {
  // margin: '24px 24px 0 24px',
  // margin: '24px',
  // marginTop: 0,
  // minHeight: 'calc(100% - 48px)',
  height: '100%',
}

const titleStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  paddingBottom: '12px',
}

const backStyle = {
  color: '#333',
  marginRight: '0.5em',
}

const Title = (props) => {
  const { extra, back } = props;
  const navigate = useNavigate();

  const goBack = (e) => {
    e.preventDefault();
    e.stopPropagation();

    navigate(-1);
  }
  return (
    <div style={titleStyle}>
      <Typography.Title level={3} style={{ fontWeight: 400, flex: 'none' }}>
        {
          back && (
            <span onClick={goBack}><ArrowLeftOutlined style={backStyle} /></span>
          )
        }
        {props.children}
      </Typography.Title>
      <div style={{ flex: 'none' }}>{extra}</div>
    </div>
  )
}

export default (props) => {
  const { extra, back } = props;

  const { meta = {} } = useRoute() || {};
  const style = meta.noLayout ? { height: '100%' } : pageStyle;
  const title = props.title || meta.title;
  const [searchParams] = useSearchParams();
  const backParam = searchParams.get('back')
  const isBack = back || new Boolean(backParam === 'false' ? 0 : backParam).valueOf();
  return (
    <div style={style}>
      {title && !meta.noLayout && <Title extra={extra} back={isBack}>{title}</Title>}
      {props.children}
    </div>
  )
}
