import { useState, useEffect, HTMLAttributes } from "react";

import "./FormBody.css";
import { getCN, randomId, clickDetective } from "../../components/utils";

export interface IFormBody extends HTMLAttributes<HTMLDivElement> {
  before?: React.ReactNode;
  after?: React.ReactNode;
  top?: React.ReactNode;
  top_after?: React.ReactNode;
  bottom?: React.ReactNode;
  formClassName?: string | undefined;
}

function FormBody({
  children,
  before,
  after,
  top,
  top_after,
  bottom,
  formClassName,
  ...props
}: IFormBody) {
  const [props_id, setPropsId] = useState(randomId(props.id, `formbody`));

  return (
    <div
      className={getCN(
        ["MYUI-FormBody", `MYUI-FormBody--${status}`],
        props.className
      )}
    >
      <div className="MYUI-FormBody__top">
        {top && <div className="MYUI-FormBody__top_before">{top}</div>}
        {top_after && <div className="MYUI-FormBody__top_after">{top_after}</div>}
      </div>
      <div
        id={props_id}
        {...props}
        className={getCN(
          ["MYUI-FormBody__in"],
          formClassName
        )}
      >
        {before && <div className="MYUI-FormBody__before">{before}</div>}
        {children}
        {after && <div className="MYUI-FormBody__after">{after}</div>}
      </div>
      {bottom && <div className="MYUI-FormBody__bottom">{bottom}</div>}
    </div>
  );
}

export default FormBody;