import React, { Fragment, useState } from 'react';
import List from "@mui/material/List";
import ListItem from "@mui/material/List";
import Collapse from "@mui/material/Collapse";
import Link from "next/link";
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import { changeLanguage } from '../../utils/commonFunction.utils';




const MobileMenu = () => {
    const router = useRouter()
    const { t } = useTranslation('menu'); // namespace: "menu.json"
    const [openId, setOpenId] = useState(0);
    const [menuActive, setMenuState] = useState(false);

    const ClickHandler = () => {
        window.scrollTo(10, 0);
    };


    const handleLanguageChange = (e) => {
        const selectedLocale = e.target.value;
        changeLanguage(router, selectedLocale);
    };

    const menus = [
        {
            id: 1,
            title: t('home'),
            link: '/',
        },
        {
            id: 4,
            title: t('ourApproach'),
            link: '/our-approach',
        },
        {
            id: 2,
            title: t('aboutUs'),
            link: '/about',
            submenu: [
                {
                    id: 11,
                    title: t('ourMission'),
                    link: '/about/our-mission'
                },
                {
                    id: 12,
                    title: t('racialJustice'),
                    link: '/about/racial-justice'
                },
            ]
        },
        {
            id: 5,
            title: t('blog'),
            link: '/blog',
        },
        {
            id: 3,
            title: t('services'),
            link: '/services',
        },
        {
            id: 88,
            title: t('contact'),
            link: '/contact',
        }
    ];

    return (
        <div>
            <div className={`mobileMenu ${menuActive ? "show" : ""}`}>
                <div className="menu-close">
                    <div className="clox" onClick={() => setMenuState(!menuActive)}><i className="ti-close"></i></div>
                </div>

                <div className="language m-2" >
                    <select onChange={handleLanguageChange} value={router.locale} style={{ width: "100%", height: "40px" }}>
                        <option value="es">español</option>
                        <option value="en">English</option>
                    </select>
                </div>

                <ul className="responsivemenu">
                    {menus.map((item, mn) => {
                        return (
                            <ListItem className={item.id === openId ? 'active' : null} key={mn}>
                                {item.submenu ?
                                    <Fragment>
                                        <p onClick={() => setOpenId(item.id === openId ? 0 : item.id)}>{item.title}
                                            <i className={item.id === openId ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
                                        </p>
                                        <Collapse in={item.id === openId} timeout="auto" unmountOnExit>
                                            <List className="subMenu">
                                                <Fragment>
                                                    {item.submenu.map((submenu, i) => {
                                                        return (
                                                            <ListItem key={i}>
                                                                <Link onClick={ClickHandler} className="active"
                                                                    href={submenu.link}>{submenu.title}</Link>
                                                            </ListItem>
                                                        )
                                                    })}
                                                </Fragment>
                                            </List>
                                        </Collapse>
                                    </Fragment>
                                    : <Link className="active"
                                        href={item.link}>{item.title}</Link>
                                }
                            </ListItem>
                        )
                    })}
                </ul>

            </div>

            <div className="showmenu" onClick={() => setMenuState(!menuActive)}>
                <button type="button" className="navbar-toggler open-btn">
                    <span className="icon-bar first-angle"></span>
                    <span className="icon-bar middle-angle"></span>
                    <span className="icon-bar last-angle"></span>
                </button>
            </div>
        </div>
    )
}

export default MobileMenu;