import "./PanelHeader.css";

import { useRef, useEffect, useState } from "react";
import { getCN, get_typeName, renderProps } from "../utils";

import { Input, Searth } from "../../index";

function PanelHeader({
  children,
  before,
  vkui = false,
  modal,
  background = true,
  separator = true,
  align = `center`,
  after,
  ...props
}: {
  [x: string]: any;
}) {
  const ref_before = useRef<HTMLInputElement | null>(null);
  const ref_after = useRef<HTMLInputElement | null>(null);

  const [width, setWidth] = useState(-1);

  return (
    <div
      className={getCN([
        `MYUI-PanelHeader__global`,
        vkui && `MYUI-PanelHeader--vkui`,
        modal && `MYUI-PanelHeader--modal`,
      ])}
    >
      <header
        {...renderProps(props)}
        className={getCN("MYUI-PanelHeader")}
      >
        <div
          data-align={align}
          data-background={background}
          className={getCN([
            "MYUI-PanelHeader__in",
            separator && "MYUI-PanelHeader__in--separator",
          ])}
        >
          <div ref={ref_before} className="MYUI-PanelHeader__before">
            {before && before}
          </div>
          <div className="MYUI-PanelHeader__children">{children}</div>
          <div ref={ref_after} className="MYUI-PanelHeader__after">
            {after && after}
          </div>
        </div>
      </header>
    </div>
  );
}

export default PanelHeader;