import {
    useEffect
} from "react";
import {
    Platform
} from "react-native";
import {
    NCoreUIKitTheme
} from "../../core/hooks";

const WebScrollbar = () => {
    const {
        shapeConfigs,
        radiuses,
        borders,
        colors
    } = NCoreUIKitTheme.useContext();

    useEffect(() => {
        if (Platform.OS !== "web") {
            return;
        }

        const doc = globalThis.document as Document | undefined;
        if (!doc || !doc.head) return;

        const styleId = "ncore-web-scrollbar-styles";
        let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;

        if (!styleEl) {
            styleEl = doc.createElement("style");
            styleEl.id = styleId;
            styleEl.type = "text/css";
            doc.head.appendChild(styleEl);
        }

        styleEl.innerHTML = `
            #root *::-webkit-scrollbar,
            body *::-webkit-scrollbar,
            html *::-webkit-scrollbar {
                height: ${shapeConfigs.scrollBarHeight}px !important;
                width: ${shapeConfigs.scrollBarWidth}px !important;
            }

            #root *::-webkit-scrollbar-track,
            body *::-webkit-scrollbar-track,
            html *::-webkit-scrollbar-track {
                border: ${borders.scrollBarTrack}px solid transparent !important;
                border-radius: ${radiuses.scrollBarTrack}px !important;
                background: ${colors.content.container.mid} !important;
                background-clip: padding-box !important;
            }

            #root *::-webkit-scrollbar-thumb,
            body *::-webkit-scrollbar-thumb,
            html *::-webkit-scrollbar-thumb {
                transition: border 0.5s, border-radius 0.5s, background 0.5s, background-clip 0.5s;
                border: ${borders.scrollBarThumb}px solid transparent !important;
                background: ${colors.content.container.primary} !important;
                border-radius: ${radiuses.scrollBarThumb}px !important;
                background-clip: padding-box !important;
            }

            #root *::-webkit-scrollbar-thumb:hover,
            body *::-webkit-scrollbar-thumb:hover,
            html *::-webkit-scrollbar-thumb:hover {
                transition: border 0.5s, border-radius 0.5s, background 0.5s, background-clip 0.5s;
                border: ${borders.scrollBarThumbHover}px solid transparent !important;
                border-radius: ${radiuses.scrollBarThumbHover}px !important;
                background: ${colors.content.container.primary} !important;
                background-clip: padding-box !important;
            }

            #root *::-webkit-scrollbar-thumb:active,
            body *::-webkit-scrollbar-thumb:active,
            html *::-webkit-scrollbar-thumb:active {
                transition: border 0.5s, border-radius 0.5s, background 0.5s, background-clip 0.5s;
                border: ${borders.scrollBarThumbActive}px solid transparent !important;
                background: ${colors.content.container.emphasized} !important;
                border-radius: ${radiuses.scrollBarThumbActive}px !important;
                background-clip: padding-box !important;
            }
        `;

        return () => {
        };
    }, [
        colors.system.default.primary
    ]);

    return null;
};
export default WebScrollbar;
