'use client'
import { useState, useEffect } from 'react';
import Link from 'next/link'
import axios from "axios";

export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
	const [isAccordion, setIsAccordion] = useState<number | null>(null);
	const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);

	useEffect(() => {
		const fetchEvents = async () => {
			try {
				const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
				const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
				if (response.data && response.data.success) {
					const evts = response.data.data.map((e: any) => ({
						id: e.id,
						title: e.title || e.eventtitle,
						link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
					}));
					setUpcomingEvents(evts);
				}
			} catch (error) {
				console.error("Error fetching upcoming events for mobile menu:", error);
			}
		};
		fetchEvents();
	}, []);

	const handleAccordion = (key: any) => {
		setIsAccordion(prevState => prevState === key ? null : key)
	}

	const [subAccordion, setSubAccordion] = useState<number | null>(null)

	const handleSubAccordion = (key: number) => {
		setSubAccordion(prevState => prevState === key ? null : key)
	}

	return (
		<>
			<div className="mobile-header mobile-haeder1 d-block d-lg-none">
				<div className="container-fluid">
					<div className="col-12">
						<div className="mobile-header-elements">
							<div className="mobile-logo">
								<Link href="/"><img src="/assets/img/logo-tca.png" alt="" /></Link>
							</div>
							<div className="mobile-nav-icon dots-menu" onClick={handleMobileMenu}>
								<i className="fa-solid fa-bars-staggered" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div className={`mobile-sidebar mobile-sidebar1 ${isMobileMenu ? 'mobile-menu-active' : ''}`}>
				<div className="logosicon-area">
					<div className="logos">
						<img src="/assets/img/logo-tca.png" alt="logo" width="60" height="80" />
					</div>
					<div className="menu-close" onClick={handleMobileMenu}>
						<i className="fa-solid fa-xmark" />
					</div>
				</div>
				<div className="mobile-nav mobile-nav1">
					<ul className="mobile-nav-list nav-list1">
						<li className="has-sub hash-has-sub">
							<Link href="/" className="hash-nav">Home </Link>
							{/* <ul className={`sub-menu ${isAccordion  == 1 ? "open-sub" : ""}`} style={{ display: `${isAccordion  == 1 ? "block" : "none"}` }}>
								<li className="hash-has-sub"><Link href="/" className="hash-nav">Home One</Link></li>
								<li className="hash-has-sub"><Link href="/index2" className="hash-nav">Home Two</Link></li>
								<li className="hash-has-sub"><Link href="/index3" className="hash-nav">Home Three</Link></li>
								<li className="hash-has-sub"><Link href="/index4" className="hash-nav">Home Four</Link></li>
								<li className="hash-has-sub"><Link href="/index5" className="hash-nav">Home Five</Link></li>
								<li className="hash-has-sub"><Link href="/index6" className="hash-nav">Home Six</Link></li>
								<li className="hash-has-sub"><Link href="/index7" className="hash-nav">Home Seven</Link></li>
								<li className="hash-has-sub"><Link href="/index8" className="hash-nav">Home Eight</Link></li>
								<li className="hash-has-sub"><Link href="/index9" className="hash-nav">Home Nine</Link></li>
								<li className="hash-has-sub"><Link href="/index10" className="hash-nav">Home Ten</Link></li>
							</ul> */}
						</li>
						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 1 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(1)}><em /></span>
							<Link href="/about" className="hash-nav">About </Link>
							<ul className={`sub-menu ${isAccordion == 1 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 1 ? "block" : "none"}` }}>
								<li className="hash-has-sub"><Link href="/about/association" className="hash-nav">Association</Link></li>
								<li className="hash-has-sub"><Link href="/about/mission" className="hash-nav">Mission</Link></li>
								<li className="hash-has-sub"><Link href="/about/constitution" className="hash-nav">Constitution</Link></li>
								<li className="hash-has-sub"><Link href="/about/committee" className="hash-nav">Committee</Link></li>
							</ul>
						</li>
						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 6 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(6)}><em /></span>
							<Link href="/tamil-culture" className="hash-nav">Tamil Culture</Link>

							<ul className={`sub-menu ${isAccordion == 6 ? "open-sub" : ""}`} style={{ display: isAccordion == 6 ? "block" : "none" }}>
								<li className="hash-has-sub">
									<span
										className={`submenu-button ${subAccordion === 1 ? "submenu-opened" : ""}`}
										onClick={() => handleSubAccordion(1)}
									><em /></span>
									<Link href="/tamil-culture/tamil-festivals" className="hash-nav">Tamil Festivals</Link>
									<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
										<li><Link href="/tamil-culture/tamil-festivals/hindu-festivals" className="hash-nav">Hindu Festivals</Link></li>
										<li><Link href="/tamil-culture/tamil-festivals/muslim-festivals" className="hash-nav">Muslim Festivals</Link></li>
										<li><Link href="/tamil-culture/tamil-festivals/christian-festivals" className="hash-nav">Christian Festivals</Link></li>
									</ul>
								</li>
								<li className="hash-has-sub">
									<span
										className={`submenu-button ${subAccordion === 2 ? "submenu-opened" : ""}`}
										onClick={() => handleSubAccordion(2)}
									><em /></span>
									<Link href="/tamil-culture/tamil-wedding-custom" className="hash-nav">Tamil Wedding & Custom</Link>
									<ul className={`sub-menu ${subAccordion === 2 ? "open-sub" : ""}`} style={{ display: subAccordion === 2 ? "block" : "none" }}>
										<li><Link href="/tamil-culture/tamil-wedding-custom/hindu-wedding-rituals" className="hash-nav">Hindu Wedding Rituals</Link></li>
										<li><Link href="/tamil-culture/tamil-wedding-custom/protestant-wedding" className="hash-nav">A Tamil Protestant Wedding</Link></li>
										<li><Link href="/tamil-culture/tamil-wedding-custom/catholic-wedding" className="hash-nav">Tamil Catholic Weddings</Link></li>
										<li><Link href="/tamil-culture/tamil-wedding-custom/city-style" className="hash-nav">Marriage – City Style</Link></li>
										<li><Link href="/tamil-culture/tamil-wedding-custom/bridal-makeup" className="hash-nav">Bridal Make Up</Link></li>
										<li><Link href="/tamil-culture/tamil-wedding-custom/story-of-saree" className="hash-nav">The Story Of The Saree</Link></li>
									</ul>
								</li>
								<li className="hash-has-sub">
									<Link href="/tamil-culture/tamil-language" className="hash-nav">Tamil Language</Link>
								</li>
							</ul>
						</li>
						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span>
							<Link href="/upcoming-event" className="hash-nav">Upcoming Event</Link>
							<ul className={`sub-menu ${isAccordion === 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion === 5 ? "block" : "none"}` }}>
								{upcomingEvents.map((event: any) => (
									<li key={event.id}>
										<Link href={event.link} className="hash-nav">
											{event.title}
										</Link>
									</li>
								))}
							</ul>
						</li>
						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>
							<Link href="#" className="hash-nav">Registration	</Link>
							<ul className={`sub-menu ${isAccordion == 2 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 2 ? "block" : "none"}` }}>
								<li className="hash-has-sub"><Link href="/register/membership-2026" className="hash-nav">Membership - 2026</Link></li>
								{/* <li className="hash-has-sub"><Link href="/register/membership-2025" className="hash-nav">Membership - 2025</Link></li>
								<li className="hash-has-sub"><Link href="/register/membership-2024" className="hash-nav">Membership - 2024</Link></li> */}
								<li className="hash-has-sub"><Link href="/register/thai-pongal-2025" className="hash-nav">Thai Pongal</Link></li>
								<li className="hash-has-sub"><Link href="/register/tamil-new-year" className="hash-nav">Tamil New Year</Link></li>
								<li className="hash-has-sub"><Link href="/register/community-picnic" className="hash-nav">Community Picnic</Link></li>
								<li className="hash-has-sub"><Link href="/register/sports-day" className="hash-nav">Sports Day</Link></li>
								{/* <li className="hash-has-sub"><Link href="/register/kalai-vizha" className="hash-nav">Kalai Vizha</Link></li> */}
								<li className="hash-has-sub"><Link href="/register/christmas" className="hash-nav">Christmas & Year End</Link></li>
								<li className="hash-has-sub"><Link href="/register/performance" className="hash-nav">Program Performance Registration</Link></li>
								<li className="hash-has-sub"><Link href="/register/sponsor" className="hash-nav">Sponsor</Link></li>
								<li className="hash-has-sub"><Link href="/register/registration-form" className="hash-nav">Whatsapp Form</Link></li>
								<li className="hash-has-sub"><Link href="/register/volunteer" className="hash-nav">Volunteer</Link></li>
								{/* <li className="hash-has-sub"><Link href="/speakers-single" className="hash-nav">Speakers Details</Link></li> */}
							</ul>
						</li>
						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 4 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(4)}><em /></span>
							<Link href="/community" className="hash-nav">Community</Link>
							<ul className={`sub-menu ${isAccordion == 4 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 4 ? "block" : "none"}` }}>
								{/* <li className="hash-has-sub"><Link href="/community/recipes" className="hash-nav">Recipes</Link></li> */}
								{/* <li className="hash-has-sub"><Link href="/community/cricket-club" className="hash-nav">Cricket Club</Link></li>
								<li className="hash-has-sub"><Link href="/community/badminton-club" className="hash-nav">Badminton Club</Link></li> */}
								<li className="hash-has-sub"><Link href="/community/business-directory" className="hash-nav">Business Directory</Link></li>
								<li className="hash-has-sub"><Link href="/community/tamil-school" className="hash-nav">Tamil School</Link></li>
								<li className="hash-has-sub"><Link href="/community/global-relief-fund" className="hash-nav">Global Relief Fund</Link></li>
							</ul>
						</li>
						<li className="hash-has-sub"><Link href="/contact" className="hash-nav">Contact</Link></li>
					</ul>

					<div className="allmobilesection">
						<Link href="/contact" className="vl-btn1">Contact Now</Link>
						<div className="single-footer">
							<h3>Contact Info</h3>
							<div className="footer1-contact-info">
								{/* <div className="contact-info-single">
									<div className="contact-info-icon">
										<span><i className="fa-solid fa-phone-volume" /></span>
									</div>
									<div className="contact-info-text">
										<Link href="/tel:+1 123 456
											7890">+1 123 456
											7890</Link>
									</div>
								</div> */}
								<div className="contact-info-single">
									<div className="contact-info-icon">
										<span><i className="fa-solid fa-envelope" /></span>
									</div>
									<div className="contact-info-text">
										<Link href="/mailto:mail@tamilculturewaterloo.org">mail@tamilculturewaterloo.org</Link>
									</div>
								</div>
								<div className="single-footer">
									<h3>Our Location</h3>
									<div className="contact-info-single">
										<div className="contact-info-icon">
											<span><i className="fa-solid fa-location-dot" /></span>
										</div>
										<div className="contact-info-text">
											<Link href="/mailto:mail@tamilculturewaterloo.org">P.O. Box No:25068, Kitchener, <br />Ontario, N2A 4A5, Canada.</Link>
										</div>
									</div>
								</div>
								<div className="single-footer">
									<h3>Social Links</h3>
									<div className="social-links-mobile-menu">
										<ul>
											<li>
												<Link href="/"><i className="fa-brands fa-facebook-f" /></Link>
											</li>
											<li>
												<Link href="/"><i className="fa-brands fa-instagram" /></Link>
											</li>
											<li>
												<Link href="/"><i className="fa-brands fa-linkedin-in" /></Link>
											</li>
											<li>
												<Link href="/"><i className="fa-brands fa-youtube" /></Link>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</>
	)
}