import React, { useState,useEffect } from 'react';

import '../asstes/css/header.css'
import { Button } from 'antd';


function Header() {
    const [value, setValue] = useState(0)

    const handleScroll = (e) => {
        console.log(window.scrollY)
        let val = window.scrollY
        if (val < 2222) {
            setValue(0)
        } else if (val < 4595) {
            setValue(1)
        } else if (val < 5544) {
            setValue(2)
        }else if (val < 7853) {
            setValue(3)
        } else {
            setValue(4)
        }
        // let val = parseInt(e.target.scrollTop / 700)
    }
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    const clickSwitchValue = (val) => {
        setValue(val)
    }
    return (
        <div className="headerRight">
            <ul >
                <li onClick={() => clickSwitchValue(0)}>
                    <a href='#Introduction'>
                        <span>產品概覽</span>
                        {value === 0 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(1)}>
                    <a href='#ProcessFlow'>
                        <span>產品特點</span>
                        {value === 1 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(2)}>
                    <a href='#Example'>
                        <span>課程案例</span>
                        {value === 2 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(3)}>
                    <a href='#CheckeredQuery'>
                        <span>配套資源</span>
                        {value === 3 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(4)}>
                    <a href='#Compare'>
                        <span>產品對比</span>
                        {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />}
                    </a>
                </li>
                <li onClick={() => clickSwitchValue(4)}>
                    <a href='https://pi.cocorobo.hk' Target='_blank'>
                    {/* <img src={require('../asstes/img/userLogin.png')} alt="" /> */}
                    <Button type="primary">開始創作</Button>
                    {/* {value === 4 && <img className='imgBorderBottom' src={require('../asstes/img/border_bottom.png')} alt="" />} */}
                    </a>
                    
                </li>
            </ul>
        </div>
    );
}
export default Header