import { useCallback, useMemo } from "react";
import { CheckIcon, XIcon } from "@heroicons/react/solid";
import { IProps } from "@/common/Iprops.interface";

export interface ItemType {
  module: string;
  service: string;
  function: string;
  dev: boolean;
  test: boolean;
}

interface DetailsExceTableType extends IProps {
  data: ItemType[] | any;
}
export const DetailsExceTable = (props: DetailsExceTableType) => {
  const getData = useCallback(
    (d: ItemType, index: number) => {
      const parent = (props.data as unknown as ItemType[])[index-1]
      const res = (
        <tr key={index + Math.random()}>
          {Object.entries(d).map((v, i) => {
            if (v[0] !== "id") {
              if (!parent) {
                if (i === 3 || i === 4) {
                  return (
                    <td
                      key={i + Math.random()}
                      className="border-l border-r border-b border-black  px-3 py-2"
                    >
                      {v[1] ? (
                        <CheckIcon className="w-5 h-5 text-green-600" />
                      ) : (
                        <XIcon className="w-5 h-5 text-red-600" />
                      )}
                    </td>
                  );
                }
                return (
                  <td key={i + Math.random()} className="border-l border-r border-black px-3 py-2">
                    {v[1]}
                  </td>
                );
              } else {
                if (i === 3 || i === 4) {
                  return (
                    <td
                      key={i + Math.random()}
                      className="border-l border-r border-b px-3 py-2 border-black"
                    >
                      {v[1] ? (
                        <CheckIcon className="w-5 h-5 text-green-600" />
                      ) : (
                        <XIcon className="w-5 h-5 text-red-600" />
                      )}
                    </td>
                  );
                } else {
                  const type = v[0] as keyof ItemType;
                  if (parent[type] === d[type]) {
                    return (
                      <td
                        key={i + Math.random()}
                        className="border-l border-r border-black px-3 py-2"
                      ></td>
                    );
                  } else {
                    return (
                      <td
                        key={i + Math.random()}
                        className="border-l border-r border-t border-b border-black px-3 py-2"
                      >
                        {d[type]}
                      </td>
                    );
                  }
                }
              }
            }
          })}
        </tr>
      );
      return res;
    },
    [props.data]
  );
  return (
    <table className="table-auto w-full  bg-white/20 border-b  border-black  backdrop-blur-lg">
      <thead className=" bg-black text-white ">
        <tr className="text-left   ">
          <th className="w-2/12 py-3 px-2  rounded-tl-lg">
            模块
          </th>
          <th className="w-3/12 py-3 px-2 ">服务</th>
          <th className="w-5/12 py-3 px-2 ">功能项</th>
          <th className="w-1/12 py-3 px-2 ">企业版本</th>
          <th className="w-1/12 py-3 px-2  rounded-tr-lg">
            开发版本
          </th>
        </tr>
      </thead>
      <tbody>
        {props.data &&
          props.data.length &&
          (props.data as unknown as ItemType[]).map((i, index) =>
            getData(i, index)
          )}
      </tbody>
    </table>
  );
};
