import { NavLink, useNavigate } from 'react-router-dom';
import arrowIcon from '../../../assets/img/icon/icon-tab.png';
import styled from 'styled-components';
import { useRecoilValue } from 'recoil';
import { authList } from '../../../store/authList';
import Modal from '../modal/Modal';
import { BtnWrapper, ButtonClose, ModalText } from '../../../styles/Components';
import { useEffect, useState } from 'react';
import Button from '../button/Button';
import { useLocation } from 'react-router-dom';
import { AuthInfo } from '../../../apis';
import { getMenuConfig } from '../../../utils';
import { adminAuthLevel } from '../../../assets/data/types';

const Navi = () => {
	const token = sessionStorage.getItem('token');
	const userInfo = useRecoilValue(authList);
	const menu = getMenuConfig(userInfo);

	const [modalClose, setModalClose] = useState('hidden');
	const [logoutModalClose, setLogoutModalClose] = useState('hidden');
	const location = useLocation();
	const navigate = useNavigate();

	const handleToken = async () => {
		const tokenStatus = await AuthInfo(token);

		tokenStatus.message === '잘못된 타입의 토큰입니다.' && setLogoutModalClose('view');
	};

	useEffect(() => {
		handleToken();
	}, [token]);

	const handleTopMenu = e => {
		e.preventDefault();
		e.target.classList.toggle('active');
	};

	const handleLink = e => {
		let topActive = document.querySelectorAll('nav .active');
		let currentTopMenu = e.target.closest('ul').previousSibling;
		for (let i = 0; i < topActive.length; i++) {
			if (topActive[i] !== currentTopMenu) {
				topActive[i].classList.remove('active');
			}
		}

		handleToken();
	};

	// 등록 완료 모달
	const handleModalClose = () => {
		if (modalClose === 'hidden') {
			setModalClose('view');
		} else {
			setModalClose('hidden');
		}
	};

	// 로그아웃 안내 모달
	const handleConfirmClose = () => {
		if (logoutModalClose === 'hidden') {
			setLogoutModalClose('view');
		} else {
			setLogoutModalClose('hidden');
			sessionStorage.removeItem('token');

			navigate('/');
		}
	};

	const isClickable = (submenu) => {
		switch (userInfo.auth_level_type) {
			case adminAuthLevel.DEVELOPER:
			case adminAuthLevel.READER:
			case adminAuthLevel.MASTER:
				return true;
			default:
				return submenu.authLevel === adminAuthLevel.NONE && userInfo.auth_list && userInfo.auth_list.some(auth => auth.id === submenu.id);
		}
	}

	return (
		<>
			<nav>
				<ul>
					{menu.map((item, idx) => {
						return (
							<li key={idx}>
								{item.access && (
									<TopMenu to={item.link} onClick={handleTopMenu}>
										{item.title}
									</TopMenu>
								)}
								<SubMenu>
									{item.submenu && userInfo &&
										item.submenu.map((submenu, idx) => {
											return (
												<SubMenuItem key={idx} $isclickable={isClickable(submenu) ? 'true' : 'false'}>
													<NavLink
														to={isClickable(submenu) ? submenu.link : location.pathname}
														onClick={e => {
															isClickable(submenu) ? handleLink(e) : handleModalClose();
														}}>
														{submenu.title}
													</NavLink>
												</SubMenuItem>
											);
										})}
								</SubMenu>
							</li>
						);
					})}
				</ul>
			</nav>
			{/* 접근 불가 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={modalClose}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleModalClose} />
				</BtnWrapper>
				<ModalText $align="center">
					해당 메뉴에 대한 조회 권한이 없습니다.
					<br />
					권한 등급을 변경 후 다시 이용해주세요.
				</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleModalClose} />
				</BtnWrapper>
			</Modal>

			{/* 로그아웃 안내 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={logoutModalClose}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleConfirmClose} />
				</BtnWrapper>
				<ModalText $align="center">로그아웃 되었습니다.</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleConfirmClose} />
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default Navi;

const TopMenu = styled(NavLink)`
	padding: 16px 30px;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #888;
	position: relative;
	color: #fff;

	&:before {
		content: '';
		display: block;
		width: 12px;
		height: 12px;
		position: absolute;
		right: 30px;
		top: 50%;
		transform: translate(0, -50%);
		background: url('${arrowIcon}') -12px 0 no-repeat;
	}
	&:hover,
	&.active {
		background: #444;
	}
	&.active ~ ul {
		display: block;
	}
	&.active:before {
		background: url('${arrowIcon}') 0 0 no-repeat;
	}
`;

const SubMenu = styled.ul`
	display: none;
`;

const SubMenuItem = styled.li`
	background: #eee;
	border-bottom: 1px solid #ccc;
	color: #2c2c2c;
	a {
		width: 100%;
		padding: 16px 30px;
		color: ${props => (props.$isclickable === 'false' ? '#818181' : '#2c2c2c')};
		text-align: left;
		&:hover,
		&.active {
			color: ${props => (props.$isclickable === 'false' ? '#818181' : '#2c2c2c')};
			font-weight: ${props => (props.$isclickable === 'false' ? 400 : 600)};
		}
	}
`;

const BackGround = styled.div`
	background: #eee2;
	width: 100%;
	height: 100%;
	z-index: 100;
`;