import React, {useState} from "react";
import {parfumes, face, heir, brands, parfumesBrends, faceBrands} from "../../constants/navbarLiArray";
import {Link, withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import style from "./navbar.module.sass";
const parfumeDropdownOpen = () => {
   return(
       <div className={style.dropdownMainContainer}>
           <div className={style.dropdown}>
               {parfumes.map((parfumesArray, index) => {
                   return(
                       <ul key={index}>
                           {parfumesArray.map((elem, index) => {
                               return (
                                   <li key={index}>
                                       <a href={`/parfumes/${elem[1]}`}>{elem[0]}</a>
                                   </li>
                               );
                           })}
                       </ul>
                   );
               })}
           </div>
           <ul className={style.brands}>
               {parfumesBrends.map((elem, index) => {
                   return(
                       <li key={index}>
                           <a href={`/brands/${elem[1]}`}>
                               <img src={elem[0]} alt={"brand"}/>
                           </a>
                       </li>
                   );
               })}
           </ul>
       </div>

   );
};

const faceDropdownOpen = () => {
    return(
        <div className={style.dropdownMainContainer}>
            <div className={style.dropdown}>
                {face.map((parfumesArray, index) => {
                    return(
                        <ul key={index}>
                            {parfumesArray.map((elem, index) => {
                                return (
                                    <li key={index}>
                                        <a href={`/makeup/${elem[1]}`}>{elem[0]}</a>
                                    </li>
                                );
                            })}
                        </ul>
                    );
                })}
            </div>

            <ul className={style.brands}>
                {faceBrands.map((elem, index) => {
                    return(
                        <li key={index}>
                            <a href={`/brands/${elem[1]}`}>
                                <img src={elem[0]} alt={"brand"}/>
                            </a>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

const hairDropdownOpen = () => {
    return(
        <div className={style.dropdownMainContainer}>
            <ul className={style.dropdown}>
                {heir.map((elem, index) => {

                    return (
                        <li key={index}>
                            <a href={`/hair/${elem[1]}`}>{elem[0]}</a>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

// const brandsDropdownOpen = () => {
//     return(
//         <ul className={style.brandsDropdown}>
//             {brands.map((elem, index) => {
//
//                 return (
//                     <li key={index}>
//                         <a href={`/brands/${elem[1]}`}>{elem[0]}</a>
//                     </li>
//                 );
//             })}
//         </ul>
//     );
// };

const Navbar = () => {

    const[loadableComponent, setLoadableComponent] = useState(null);

    return(
      <div className={style.mainContainer}>
        <ul>
            <li className={style.dropdownTitle} onMouseMove={() => setLoadableComponent(1)}>
                <a href={`/parfumes/110`}>
                    Парфюмерия
                </a>
                {loadableComponent === 1 && parfumeDropdownOpen()}
            </li>
            <li className={style.dropdownTitle} onMouseMove={() => setLoadableComponent(2)}>
                <a href={`/makeup/210`}>
                    Макияж
                </a>
                {loadableComponent === 2 && faceDropdownOpen()}
            </li>
            <li className={style.dropdownTitle}>
                <a href={`/nails/410`}>
                    Лаки для ногтей
                </a>
            </li>
            <li className={style.dropdownTitle}>
                <a href={`/hair/310`}>
                    Волосы
                </a>
                {hairDropdownOpen()}
            </li>
        </ul>
      </div>
    );
};

export default Navbar;