import React, { useEffect } from "react";
import { Button, Collapse, Input } from "antd";
import { SearchOutlined, SettingOutlined } from "@ant-design/icons";
import TableItem from "./TableItem";
import { useModel } from "umi";
import type { TableItemType } from "@/type";
import noData from "@/assets/no-data.png";
import { useSessionStorageState } from "ahooks";
export default function TablePanel() {
  const { project, updateTable, addTable } = useModel("erModel");
  const contentRef = React.useRef<HTMLDivElement>(null);
  const [contentStyle, setContentStyle] = React.useState<React.CSSProperties>(
    {}
  );
  const [active, setActive] = useSessionStorageState<string>('table-active', {
    defaultValue: "",
    listenStorageChange: true
  });

  useEffect(() => {
    // 计算高度
    setContentStyle({
      height: `calc(100vh - ${contentRef.current?.getBoundingClientRect().top}px)`,
    });
  }, []);

  return (
    <div
      className="px-12px overflow-y-auto"
      ref={contentRef}
      style={contentStyle}
    >
      <div className="search-box flex gap-4px mb-12px">
        <Input placeholder="输入关键字搜索" suffix={<SearchOutlined />} />
        <Button type="primary" onClick={() => addTable()}>
          添加表
        </Button>
        <Button type="primary">导入表</Button>
      </div>
      {project.tables.map((item) => {
        return (
          <TableItem
            data={item}
            onChange={updateTable}
            key={item.table.id}
            active={active}
            setActive={setActive}
          />
        );
      })}
      {project.tables.length === 0 && (
        <div className="flex flex-col items-center justify-center h-[300px]">
          <img src={noData} alt="暂无数据" className="w-[200px] h-[200px]" />
          <div className="text-gray-400">暂无数据表，快来创建！</div>
        </div>
      )}
    </div>
  );
}
