import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
import React, {SyntheticEvent, useEffect} from "react";
import {getBrowser} from "../main.tsx";
import {Settings} from "./Body.tsx";
import react from "@vitejs/plugin-react";

/**
 * A component for a single bookmark
 *
 * @param props.data The BookmarkTreeNode with the data for the bookmark
 */
function Bookmark(props: {data: BookmarkTreeNode}) {
    let [favicon, setFavicon] = React.useState<string | null>(null);
    let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter");
    let [settings, setSettings] = React.useContext(Settings);
    let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
    // let [dropRight, setDropRight] = React.useState(false);
    // let [dropLeft, setDropLeft] = React.useState(false);
    // let [dropCenter, setDropCenter] = React.useState(false);

    useEffect(() => {
        setBgColor([255, 0, 0])
        // faviconURL(props.data.url).then(o => o && setFavicon(o))
        faviconURL(props.data).then(r => {
            if (r) {
                setFavicon(r)
                setIconMode("small");
            }
        })
    }, []);

    // useEffect(() => {
    //     console.log("signal received", dropCenter)
    // }, [dropCenter]);

    function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
        if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) {
            setIconMode("large")
        }
    }

    return(
        <div className={"bookmark"}>
            <a draggable={settings.editMode} href={props.data.url}
               // onDragStart={e => {
               //     console.log("dragStart")
               //     e.dataTransfer.dropEffect = "move";
               //     e.dataTransfer.setData("bm-id", props.data.id);
               // }}
            >
                <div className={"icon-box " + (iconMode)}
                     style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
                    {favicon ? (
                        <img alt="Bookmark icon"
                             draggable={false}
                             src={favicon}
                             onLoad={handleImageLoad}
                        />
                    ) : (
                        <span className={"letter"}>{new URL(props.data.url!).hostname.charAt(0)}</span>
                    )}

                </div>
                <span>{props.data.title}</span>
            </a>
            {/*<div className={"drop-targets"}>*/}
            {/*    <div*/}
            {/*        className={"left"}*/}
            {/*        onDragEnter={_ => setDropLeft(true)}*/}
            {/*        onDragLeave={_ => setDropRight(false)}*/}
            {/*        onDrop={e => getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {parentId: props.data.parentId, index: props.data.index})}*/}
            {/*        style={dropLeft ? undefined : {visibility: "hidden"}}*/}
            {/*        // hidden={!dropLeft}*/}
            {/*    >*/}
            {/*        <div/>*/}
            {/*    </div>*/}
            {/*    <div*/}
            {/*        className={"right"}*/}
            {/*        onDragEnter={_ => setDropLeft(true)}*/}
            {/*        onDragLeave={_ => setDropRight(false)}*/}
            {/*        onDrop={e => getBrowser().bookmarks.move(e.dataTransfer.getData("bm-id"), {parentId: props.data.parentId, index: (props.data.index! + 1)})}*/}
            {/*        style={dropRight ? undefined : {visibility: "hidden"}}*/}
            {/*        // hidden={!dropRight}*/}
            {/*    >*/}
            {/*        <div/>*/}
            {/*    </div>*/}
            {/*    <div*/}
            {/*        className={"center"}*/}
            {/*        onDragOver={e => {*/}
            {/*            e.preventDefault()*/}
            {/*            // console.log("dropped")*/}
            {/*        }}*/}
            {/*        onDragEnter={e => {*/}
            {/*            e.preventDefault()*/}
            {/*            setDropCenter(true)*/}
            {/*            console.log("enter")*/}
            {/*        }}*/}
            {/*        onDragLeave={_ => {*/}
            {/*            setDropCenter(false)*/}
            {/*            console.log("exit")*/}
            {/*        }}*/}
            {/*        onDrop={e => {*/}
            {/*            e.preventDefault();*/}
            {/*            console.log("dropped")*/}
            {/*        }}*/}
            {/*        style={dropCenter ? undefined : {visibility: "hidden"}}*/}
            {/*        // hidden={!dropCenter}*/}
            {/*    >*/}
            {/*        <span>+</span>*/}
            {/*    </div>*/}
            {/*</div>*/}
        </div>
    );
}

/**
 * Gets the icon for a bookmark
 *
 * @param data The URL of the link
 * @return The URL of the icon
 */
async function faviconURL(data: BookmarkTreeNode) {
    let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id];
    if (i) return i

    const url = new URL('https://www.google.com/s2/favicons');
    url.searchParams.set("sz", "256");
    url.searchParams.set("domain_url", data.url!);
    let resp = await fetch(url)
    let imgData = resp.ok ? await toDataURL(url.toString()) : null;
    getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData});
    return imgData;
}

function toDataURL(url:string):string {
    // @ts-ignore
    return fetch(url)
        .then(response => response.blob())
        .then(blob => new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.onloadend = () => resolve(reader.result)
            reader.onerror = reject
            reader.readAsDataURL(blob)
        }))
}

// function hashColor(url:string) {
//     hashCode(String)
// }
//
// function hashCode(str: string) {
//     let hash = 0;
//     for (let i = 0, len = str.length; i < len; i++) {
//         let chr = str.charCodeAt(i);
//         hash = (hash << 5) - hash + chr;
//         hash |= 0; // Convert to 32bit integer
//     }
//     return hash;
// }

export default Bookmark;