// A custom Framer code override by Chris Kellett - Framerverse
// Get more components at www.framerverse.com
// Simple Docs Sidelinks
// Version 1.0

import React, { useState, useEffect, useRef } from "react";
import { Frame, addPropertyControls, ControlType } from "framer";

export function SidebarLink(props) {
    const {
        text,
        link,
        activeColor,
        inactiveColor,
        hoverColor,
        font,
        fontSize,
        fontWeight,
    } = props;
    const [isActive, setIsActive] = useState(false);
    const observer = useRef(null);

    useEffect(() => {
        // Function to update active state
        const updateActiveState = () => {
            const hash = window.location.hash.slice(1);
            setIsActive(hash === link);
        };

        // Set up Intersection Observer
        observer.current = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        setIsActive(true);
                        window.history.pushState(null, null, `#${link}`);
                    } else {
                        setIsActive(false);
                    }
                });
            },
            { threshold: 0.5 } // Trigger when 50% of the target is visible
        );

        // Observe the corresponding section
        const targetSection = document.getElementById(link);
        if (targetSection) {
            observer.current.observe(targetSection);
        }

        // Listen for hash changes
        window.addEventListener("hashchange", updateActiveState);
        updateActiveState(); // Initial check

        // Cleanup
        return () => {
            window.removeEventListener("hashchange", updateActiveState);
            if (observer.current && targetSection) {
                observer.current.unobserve(targetSection);
            }
        };
    }, [link]);

    return (
        <div
            style={{
                width: "100%",
                height: "auto",
                textAlign: "left",
                display: "flex",
                overflow: "hidden", // Prevent scrollbar
            }}
        >
            <div
                background="none"
                width="100%"
                style={{
                    color: isActive ? activeColor : inactiveColor,
                    fontFamily: font,
                    fontSize: fontSize,
                    fontWeight: fontWeight,
                    textDecoration: "none",
                    cursor: "pointer",
                    textAlign: "left",
                    display: "flex",
                    alignItems: "center", // Ensure vertical centering
                    transition: "color 0.3s ease, transform 0.3s ease",
                    transform: isActive ? "translateX(8px)" : "translateX(0px)",
                    whiteSpace: "normal", // Allow text to wrap to the next line
                }}
                whileHover={{ color: hoverColor }}
                onClick={() => {
                    const element = document.getElementById(link);
                    if (element) {
                        element.scrollIntoView({ behavior: "smooth" });
                    }
                }}
            >
                {isActive && (
                    <span
                        style={{
                            marginRight: "8px",
                            transition: "opacity 0.3s ease",
                            opacity: isActive ? 1 : 0,
                        }}
                    >
                        ›
                    </span>
                )}
                <span>{text}</span>
            </div>
        </div>
    );
}

SidebarLink.defaultProps = {
    text: "Link Text",
    link: "page-1",
    activeColor: "#27AB8A",
    inactiveColor: "white",
    hoverColor: "#27AB8A",
    font: "Inter",
    fontSize: 16,
    fontWeight: 400, // Default font weight
};

addPropertyControls(SidebarLink, {
    text: { type: ControlType.String, title: "Text" },
    link: { type: ControlType.String, title: "Link (without #)" },
    activeColor: { type: ControlType.Color, title: "Active Color" },
    inactiveColor: { type: ControlType.Color, title: "Inactive Color" },
    hoverColor: { type: ControlType.Color, title: "Hover Color" },
    font: { type: ControlType.String, title: "Font" },
    fontSize: {
        type: ControlType.Number,
        title: "Font Size",
        min: 8,
        max: 72,
        step: 1,
    },
    fontWeight: {
        type: ControlType.Number,
        title: "Font Weight",
        min: 100,
        max: 900,
        step: 100,
    },
});