import { useEffect, useState } from "react";
import { IPropMeta } from "../types";

interface IProps {
  propList: IPropMeta[];
}

type IHeader = {
  [key: string]: string;
};

/**
 * 可以拓展更多的annotation tag
 */
const tableHeader: IHeader = {
  name: "参数名",
  description: "说明",
  type: "类型",
  default: "默认值",
  required: "必须",
  version: "版本",
};

export default function ApiTable(props: IProps) {
  const [propList, setPropList] = useState<IPropMeta[]>([]);

  useEffect(() => {
    props.propList?.length > 0 ? setPropList(props.propList) : setPropList([]);
  }, [props.propList]);

  const format = (prop: string, v: any) => {
    if (prop === "version") return !v ? "" : "v" + v;
    if (typeof v === "boolean") return !v ? "" : "" + v;
    return v;
  };

  return (
    <div className="anchor-api-table api-table-container">
      <h1>API</h1>
      <table className="api-table">
        <thead>
          <tr>
            {Object.keys(tableHeader).map((prop) => {
              return (
                <th key={prop}>
                  <div>{tableHeader[prop]}</div>
                  {/* <div className="annotation-prop">@{prop}</div> */}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {propList?.length > 0 ? (
            propList.map((m) => {
              return (
                <tr key={m.name}>
                  {Object.keys(tableHeader).map((prop) => {
                    return <td key={prop}>{format(prop, (m as any)[prop])}</td>;
                  })}
                </tr>
              );
            })
          ) : (
            <tr key={"without-data"}>
              <td
                style={{ textAlign: "center", fontWeight: "normal" }}
                colSpan={Object.keys(tableHeader).length}
              >
                该组件 props.ts 缺失, 或未定义任何 interface
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}