import React, {useState} from "react";
import { Link } from "react-router-dom";
import PermissionGuard from "../PermissionGuard";
import "./PathNode.css";
import {useDeletePath, usePaths, useUpdatePath} from "../../utils/path-queries";
import {useIndexMarkdown, useMarkdownsByPath} from "../../utils/markdown-queries";

const PathNode = ({ path, isRoot = false }) => {
    const [isExpanded, setIsExpanded] = useState(isRoot);
    const [isEditing, setIsEditing] = useState(false);
    const [newName, setNewName] = useState(path.name);

    const { data: childPaths, isLoading: isChildLoading, error: childError } = usePaths(path.id);
    const { data: markdowns, isLoading: isMarkdownLoading, error: markdownError } = useMarkdownsByPath(path.id);
    const deletePath = useDeletePath();
    const updatePath = useUpdatePath();

    const {data: indexMarkdown, isLoading: isIndexLoading, error: indexMarkdownError} = useIndexMarkdown(path.id);


    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };

    const handleSave = () => {
        console.log(`handleSave  ${path.id}`);
        updatePath.mutate({id: path.id, data: {name: newName}}, {
            onsuccess: () => setIsEditing(false),
            onError: err => alert("failed to update this path"),
        })
    };
    const handleDelete = () => {
        if(window.confirm("Are you sure?")) {
            deletePath.mutate(path.id, {
                onError: err => alert("failed to delete this path"),
            })
        }
    };
    const handleEdit = () => {
        setIsEditing(true);
    };



    if(childError || markdownError){
        return <li>Error...</li>;
    }


    return (
        <li>
            <div className="path-node-header is-clickable field has-addons" onClick={isRoot ? undefined : toggleExpand}>
                {isEditing ? (

                        <div className = "control has-icons-left">
                            <input
                                className="input is-small path-edit-input"
                                value={newName}
                                onChange={(e) => setNewName(e.target.value)}
                            />
                        </div>

                ) : (
                    <span className="path-name has-text-weight-bold control">
                        {
                            indexMarkdown ? (
                                <Link to={`/markdown/${indexMarkdown.id}`} className="is-link">
                                    {path.name}
                                </Link>
                            ) : (
                                <a className="is-link">{path.name}</a>
                            )
                        }

                    </span>
                )}

                <PermissionGuard rolesRequired={["admin"]}>
                    <div className="field has-addons actions control is-justify-content-flex-end">
                        {isEditing ? (
                            <p className="control">
                                <button
                                    className="button is-small is-success"
                                    onClick={handleSave}
                                    type="button"
                                >
                                    <span className="icon">
                                        <i className="fas fa-check"></i>
                                    </span>
                                </button>
                            </p>
                        ) : (
                            <p className="control">
                                <button
                                    className="button is-small is-info"
                                    onClick={handleEdit}
                                    type="button"
                                >
                                    <span className="icon">
                                        <i className="fas fa-pen"></i>
                                    </span>
                                </button>
                            </p>
                        )}
                        <p className="control">
                            <button
                                className="button is-danger is-small"
                                onClick={handleDelete}
                                type="button">
                                <span className="icon">
                                    <i className="fas fa-trash"></i>
                                </span>
                            </button>
                        </p>
                    </div>
                </PermissionGuard>
            </div>

            {isExpanded && (
                <ul>
                    { isChildLoading && <p>Loading...</p>}
                    { childPaths.map((child) => (
                        <PathNode
                            key={child.id}
                            path={child}
                        />
                    ))}

                    { markdowns.filter(md => md.title !== "index").map((markdown) => (
                        <li key={markdown.id}>
                            <Link to={`/markdown/${markdown.id}`} className="is-link">
                                {markdown.title}
                            </Link>
                        </li>
                    ))}
                </ul>
            )}
        </li>
    );
};

export default PathNode;
