'use client'
import Link from "next/link";
import Qselect from "../common/select/Qselect";

export const ToggleonMouse = (e, act, target) => {
    const listWrap = e.target.closest(target);
    const ListItem = Array.from(listWrap.childNodes)
    ListItem.forEach(el => {
        if(act === 'add'){
            el.classList.add('mouse');
        }else{
            el.classList.remove('mouse');
        }
    })
    if(act === 'add'){
        e.target.parentElement.classList.remove('mouse')
    }
}

export default function Header() {
    const SelectOption = [
        {name: 'オンライン保証シ',}, {name: 'ステム'}
    ]
    return(
        <header>
            <div className="header-inner">
                <div className="header-right">
                    <h1 className="logo">
                        <Link href={'#'}></Link>
                    </h1>
                    <nav>
                        <ul className="nav-list ">
                            <li 
                            className="nav-item " 
                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                            >
                                <Link href={'#'}>ホームへ</Link>
                            </li>
                            <li 
                            className="nav-item" 
                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                            >
                                <button>物品及び図面管理</button>
                                <ul className="nav-depth2">
                                    <li className="nav-depth2-item"
                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                                    ><Link href={'#'}>新規物件登録</Link></li>
                                    <li className="nav-depth2-item"
                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                                    ><Link href={'#'}>モノ/図面管理</Link></li>
                                </ul>
                            </li>
                            <li 
                            className="nav-item" 
                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                            >
                                <button>コミュニティ</button>
                                <ul className="nav-depth2">
                                    <li className="nav-depth2-item"
                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                                    ><Link href={'#'}>お知らせ</Link></li>
                                    <li className="nav-depth2-item"
                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                                    ><Link href={'#'}>FAQ</Link></li>
                                    <li className="nav-depth2-item"
                                        onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} 
                                        onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                                    ><Link href={'#'}>素材のダウンロード</Link></li>
                                </ul>
                            </li>
                            <li 
                            className="nav-item " 
                            onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} 
                            onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
                            >
                                <Link href={'#'}>1:1お問い合わせ</Link>
                            </li>
                        </ul>
                    </nav>  
                </div>
                <div className="header-left">
                    <div className="profile-box">
                        <button className="profile">Kim Ji Young</button>
                    </div>
                    <div className="sign-out-box">
                        <button className="sign-out">ログアウト</button>
                    </div>
                    <div className="select-box">
                        <Qselect title={'Q.ORDER'} option={SelectOption}/>
                    </div>
                    <div className="btn-wrap">
                        <button className="btn-frame small dark">移動</button>
                    </div>
                </div>
            </div>
        </header>
    )
}