"use client";

import { useState } from "react";
import { MoreSection, PROFILE } from "@/data/content";
import { useStaggerReveal, useWiggle } from "@/hooks/useAnimations";
import "@/styles/more-section.css"

export default function ProfileMore() {
  const [delayTimer, setDelayTimer] = useState<number | null>(null);
  const [hovered, setHovered] = useState<boolean | null>(null);
  const [morePosition, setMorePosition] = useState<number>(PROFILE.moreSectionsStart ?? 0);

  
  
  const { wiggling, progress, handlers } = useWiggle(500, () => {});
  
  function handleSectionExpand(){
    setMorePosition(morePosition + 1);
  }

  function handleEnter(){
      if (delayTimer) return;
        setHovered(true);        
        let timer = window.setTimeout(() => {
                handleSectionExpand();
            }, 500);
            setDelayTimer(timer);
  }
  
  function handleLeave() {
     if (delayTimer){
                clearTimeout(delayTimer);
                setDelayTimer(null);
            }
            setHovered(false);
  }
  return (
      <div 
      className="more-section-container"      
      style={{
        minHeight: "100px", 
        width: "100%",
        overflow: "hidden"
        }}
        >
        {PROFILE.moreSections.map((item: MoreSection, i)=>{
            return (
                <div 
                key={i}
                style={{
                   // display: i < morePosition ? "block" : "none",
                    opacity: i < morePosition ? 1.0 : 0.0,
                    transition: "all 0.3s ease",
                    overflow: "hidden",
                    minHeight: i < morePosition ? "5em" : "0em",
                    height: i < morePosition ? "auto" : "0",
                }}>
                {item.title && (<h3
                 style={{
                    marginBottom: 8,
                    fontFamily: "var(--mono)",
                    fontSize: 11,
                    color: "var(--muted)",
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                    }}>
                    {item.title}
                </h3>)}
                <p style={{
                     fontFamily: "var(--sans)",
                    fontSize: 16,
                    lineHeight: 1.7,
                    color: "var(--fg-secondary)",
                    margin: "0 0 40px 0",
                    maxWidth: 560,
                }}>{item.text}</p>
                </div>
            );
        })}
      
      <div {...handlers} className={`drop-handle ${wiggling ? "wiggle" : ""}`}
       onMouseEnter={
            () => handleEnter()
       }
       onMouseLeave={() => handleLeave()}
        onTouchStart={
            () => handleEnter()
        }
        onTouchEnd={()=>handleLeave()}
        onClick={() => {
             if (delayTimer){
                clearTimeout(delayTimer);
             }
            handleSectionExpand();
        }}
       style={{ 
        opacity: morePosition < PROFILE.moreSections.length ? 1.0 : 0.0,
        backgroundColor: hovered ? "var(--surface)" : "var(--bg-raised",
        width: "100%",
        height: "2em",
        display: "flex",
        gap: 12,
        margin: "0 0 40px 0",
        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
        bottom:  hovered ? "-10px" : "0px",
        position: "relative",        
        }}>

        <svg height={"30px"} width={"30px"} fill="var(--fg-secondary)" version="1.1" id="Capa_1" style={{scale:"0.5"}} >
            <g>
            <path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0
                l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"/>
            </g>
        </svg>
        <span style={{
                     fontFamily: "var(--sans)",
                    fontSize: 12,
                    lineHeight: 0.5,
                    color: "var(--fg-secondary)",
                    alignSelf: "center",
                    textTransform: "uppercase"                   
                }}>more?</span>
        </div>
        
      </div>      
  );
}