import { Button, Space } from "antd";
import { useEffect, useState } from "react";
import HeaderBack from "../HeaderBack";

/**
 * 页面布局组件
 */
function Page(props) {
  const {
    headerTitle,
    history,
    isShowHeader = true,
    headerPrevious = true,
    isShowFooter = true,
    isShowAllAction = true,
    backButtonText = "关闭",
    contentPadding = "20px",
    customActionButtons,
    extraActionButtons,
  } = props;

  const [pageWidth, setPageWidth] = useState(window.innerWidth);

  const getPageWidth = () => {
    const pageDom = document.querySelector("#page");
    if (!pageDom)
      return;
    setPageWidth(pageDom.offsetWidth);
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      getPageWidth();
    }, 0);
    window.addEventListener("resize", getPageWidth);
    return () => {
      window.removeEventListener("resize", getPageWidth);
      clearTimeout(timer);
    };
  }, []);

  return (
    <div className="page" id="page">
      {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
      <div style={{ padding: contentPadding }}>
        {props.children}
      </div>
      {
        (isShowAllAction && isShowFooter) && (
          <>
            <div style={{ height: "32px" }}></div>
            <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -44px" }}>
              {customActionButtons || (
                <Space>
                  {extraActionButtons}
                  <Button onClick={() => history?.goBack?.() || window.history.back()}>
                    {backButtonText}
                  </Button>
                </Space>
              )}
            </div>
          </>
        )
      }
    </div>
  );
}

Page.displayName = "Page";

export default Page;