import { useState, useEffect } from "react";

import { get } from "../../request";
import type { IPaliChapterListResponse } from "../../api/pali-text";
import type { IChapter } from "./BookViewer";
import type { IPaliChapterData } from "./PaliChapterCard";
import PaliChapterList, { type IChapterClickEvent } from "./PaliChapterList";

interface IWidget {
  chapter: IChapter;
  onChapterClick?: (e: IChapterClickEvent) => void;
}
const PaliChapterListByParaWidget = ({ chapter, onChapterClick }: IWidget) => {
  const [tableData, setTableData] = useState<IPaliChapterData[]>([]);

  useEffect(() => {
    console.log("palichapterlist useEffect");
    const url = `/api/v2/palitext?view=chapter_children&book=${chapter.book}&para=${chapter.para}`;
    get<IPaliChapterListResponse>(url).then(function (json) {
      console.log("chapter ajex", json);
      const newTree: IPaliChapterData[] = json.data.rows.map((item) => {
        return {
          Title: item.toc,
          PaliTitle: item.toc,
          level: item.level,
          Path: item.path,
          Book: item.book,
          Paragraph: item.paragraph,
          chapterStrLen: item.chapter_strlen,
          paragraphCount: item.chapter_len,
          progressLine: item.progress_line,
        };
      });
      setTableData(newTree);
    });
  }, [chapter]);

  return (
    <>
      <PaliChapterList
        onChapterClick={(e: IChapterClickEvent) => {
          if (onChapterClick) {
            onChapterClick(e);
          }
        }}
        data={tableData}
      />
    </>
  );
};

export default PaliChapterListByParaWidget;
