import React, { useState } from 'react';
import {motion, useScroll, useMotionValueEvent, useAnimationControls} from "framer-motion"

const hamburger01Variants = {
    open: { d: 'M3.06061 2.99999L21.0606 21' },
    closed: { d: 'M0 9.5L24 9.5' },
};

const hamburger02Variants = {
    open: { d: 'M3.00006 21.0607L21 3.06064' },
    moving: { d: 'M0 14.5L24 14.5' },
    closed: { d: 'M0 14.5L15 14.5' },
};

const hmenuVariants = {
    open: { translateY: "0rem", opacity: 1},
    closed: {translateY: "-4rem", opacity: 0.3},
};

const NavMenu = () => {

    const { scrollYProgress } = useScroll();
    // const menu_offset = useTransform(scrollYProgress, [0,0.1], ['50%', '100%']);
    // const menu_offset_l = useTransform(scrollYProgress, [0,0.1], ['-50%', '-100%']);
    const [scrollPosition, setScrollPosition] = useState(0.0);
    const animControls = useAnimationControls();

    useMotionValueEvent(scrollYProgress, "change", (latest) => {
        setScrollPosition(latest);
        if(latest > 0.001)
        {
            animControls.start({left: "100%", translateX: "-100%", transition: {duration: 0.1}});
        }
        else
        {
            animControls.stop();
            animControls.start({left: "50%", translateX: "-50%", transition: {duration: 0.1}});
        }
      })

    const [hmenustate, setHMenuState] = useState('closed');
    const onClick = () => {
    setHMenuState('moving');
    setTimeout(() => {
        setHMenuState(hmenustate === 'closed' ? 'open' : 'closed');
    }, 200);
    };
    return (
        <>
        <motion.div className={'hidden lg:flex fixed top-0 left-0 right-0 w-full px-12 h-24 transition-all duration-100 bg-transparent z-10 items-center text-xl select-none '
                    + (scrollPosition > 0.0 ? "justify-end":"justify-center")}
                    // initial={{y:100, opacity: 0.1}}
                    // animate={{y: 0, opacity:1.0}}
                    // transition={{type: "tween", stiffness:300}}
                    >
            <div className='relative w-full h-full'>
            <div className='absolute top-[50%] left-12 translate-y-[-50%]'>
                <p className='text-4xl font-bold '>SanxPay</p>
            </div>
            <div className='absolute top-0 left-12 right-12 bottom-0'>
                <div className='relative w-full h-full'>
                    <motion.nav className='absolute flex gap-8 justify-center items-center lg:text-xl'
                        transition={{type: "tween", duration: 0.5}}
                        initial={{left: "50%", translateX: "-50%", top: "50%", translateY: "-50%"}}
                        animate={animControls}
                        >
                        <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>О нас</a>
                        <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Сервисы</a>
                        {/* <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Шаги</a> */}
                        <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Контакты</a>
                    </motion.nav>
                </div>
            </div>
            </div>
        </motion.div>
        <motion.div className={'flex lg:hidden bg-black bg-opacity-30 justify-between fixed top-0 left-0 right-0 w-full px-12 h-16 transition-all duration-100 z-10 items-center text-xl select-none'}>
            <p className='text-3xl font-bold '>SanxPay</p>
            <div id='menu-icon'>
                <button onClick={onClick}>
                    <svg width='24' height='24' viewBox='0 0 24 24'>
                        <motion.path
                        stroke='#FFFFFF'
                        animate={hmenustate}
                        variants={hamburger01Variants}
                        />
                        <motion.path
                        stroke='#FFFFFF'
                        animate={hmenustate}
                        variants={hamburger02Variants}
                        />
                    </svg>
                </button>
            </div>
            <div className='absolute left-0 right-0 w-full translate-y-full h-16 overflow-hidden'>
                <motion.nav className='absolute bg-black bg-opacity-30 flex items-center justify-center gap-4 h-16 w-full'
                            animate={hmenustate}
                            variants={hmenuVariants}
                            transition={{type: "tween", duration: 0.3}}>
                    <a href="##" className='hover:opacity-50 transition-all duration-100 w-[55px]'>О нас</a>
                    <a href="##" className='hover:opacity-50 transition-all duration-100'>Сервисы</a>
                    {/* <a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a> */}
                    <a href="##" className='hover:opacity-50 transition-all duration-100'>Контакты</a>

                </motion.nav>
            </div>
        </motion.div>
        </>
    );
}

export default NavMenu;
