import { useTranslation } from "react-i18next";
import {useContext, useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";
import {readFileLibDatabase, updateFileLib} from "../../../controllers/API";
import {alertContext} from "../../../contexts/alertContext";
import {captureAndAlertRequestErrorHoc} from "../../../controllers/request";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger
} from "../../../components/ui/dropdown-menu";
import {useTable} from "../../../util/hook";
import moveIcon from "../../../assets/knowledge/move-icon.png";
import folderIcon from "../../../assets/knowledge/folder-icon.png";
import noFolderIcon from "../../../assets/knowledge/no-folder-icon.png";

export default function MoveModal({ data, open, setOpen, reload }) {
    const { t } = useTranslation()
    const navigate = useNavigate()
    const [parentId, setParentId] = useState("")
    const { setErrorData } = useContext(alertContext);
    const [error, setError] = useState({ name: false })
    const handleMove = () => {
        const errorlist = []
        if (!parentId) errorlist.push(t('lib.selectFold'))

        if (errorlist.length) return handleError(errorlist)

        captureAndAlertRequestErrorHoc(updateFileLib({
            id: data.id,
            name: data.name,
            parent_id: parentId
        }).then(res => {
            reload()
            setOpen(false)
        }))
    }

    const { page, pageSize, data: datalist, total, loading, setPage, search} = useTable({},(param) =>
        readFileLibDatabase(param.page, 10000, param.keyword, '', '1')
    )

    const handleError = (list) => {
        setErrorData({
            title: t('prompt'),
            list
        });
    }

    return (
        <dialog className={`modal ${open && 'modal-open'}`}>
            <form method="dialog" className="modal-box w-[850px] bg-[#fff] shadow-lg dialog-box">
                <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-4" onClick={() => setOpen(false)}>✕</button>
                <h3 className="tip-title tip-title-left"><img src={moveIcon} className={"tip-title-icon"}/>{t('lib.myKnowledge')}</h3>
                {
                    datalist.length > 0 ?
                        <div className={"folder-list third-list"}>
                            {datalist.map((el) => (
                                el.id != data.id ?
                                <div className={parentId == el.id ? "folder-item third-item folder-item-active" : "folder-item third-item"} key={el.id}>
                                    <div className={"folder-content-item"} onClick={() =>setParentId(el.id)}>
                                        <div className={"folder-header"}>
                                            <span className={"knowledge-img-bg"}>
                                                <img src={folderIcon}/>
                                            </span>
                                            <label>{el.name}</label>
                                        </div>
                                        <div className={"folder-description"}>
                                            {el.type == 1 ? t("lib.foldDesc") :el.description}
                                        </div>
                                        <div className={"folder-type"}>{el.type == 1?t('lib.folder'):el.type == 2?t('lib.universalKnowledgeBase'):t('lib.webSite')}</div>
                                    </div>
                                </div>
                                    : ""
                            ))}
                        </div>
                        :
                        <div  className={"no-folder"}>
                            <img src={noFolderIcon}/>
                            <p>{t('lib.noFold')}</p>
                        </div>
                }
                <div className={"right-button-box"}>
                    <button className={"yellow-button"} onClick={handleMove}>{t("confirmButton")}</button>
                </div>
            </form>
        </dialog>
    );
}