import type { Key } from "antd/lib/table/interface";
import { useState, useEffect } from "react";

import { get } from "../../request";
import type { IPaliTocListResponse } from "../../api/Corpus";
import type { ListNodeData } from "./EditableTree";
import TocTree from "./TocTree";
import { Skeleton } from "antd";

interface IWidget {
  book?: number;
  para?: number;
  series?: string;
  channel?: string;
  onSelect?: Function;
  onClick?: Function;
}
const PaliTextTocWidget = ({
  book,
  para,
  series,
  onSelect,
  onClick,
}: IWidget) => {
  const [tocList, setTocList] = useState<ListNodeData[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<Key[]>();
  const [expandedKeys, setExpandedKeys] = useState<Key[]>();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    let url = `/v2/palitext?view=book-toc`;
    if (series) {
      url += `&series=${series}`;
    } else {
      url += `&book=${book}&para=${para}`;
    }
    setLoading(true);
    console.info("api request", url);
    get<IPaliTocListResponse>(url)
      .then((json) => {
        console.info("api response", json);
        const toc = json.data.rows.map((item, _id) => {
          return {
            key: `${item.book}-${item.paragraph}`,
            title: item.toc,
            level: parseInt(item.level),
          };
        });
        setTocList(toc);
        if (json.data.rows.length > 0) {
          const path: string[] = [];
          for (let index = json.data.rows.length - 1; index >= 0; index--) {
            const element = json.data.rows[index];
            if (element.book === book && para && element.paragraph <= para) {
              path.push(`${element.book}-${element.paragraph}`);
              break;
            }
          }
          setExpandedKeys(path);
          setSelectedKeys(path);
        }
      })
      .finally(() => setLoading(false));
  }, [book, para, series]);

  return loading ? (
    <Skeleton active />
  ) : (
    <TocTree
      treeData={tocList}
      selectedKeys={selectedKeys}
      expandedKeys={expandedKeys}
      onSelect={(selectedKeys: Key[]) => {
        if (typeof onSelect !== "undefined") {
          onSelect(selectedKeys);
        }
      }}
      onClick={(
        id: string,
        e: React.MouseEvent<HTMLSpanElement, MouseEvent>
      ) => {
        if (typeof onClick !== "undefined") {
          onClick(id, e);
        }
      }}
    />
  );
};

export default PaliTextTocWidget;