import { styled } from 'styled-components';
import { useState, useEffect } from 'react';
import MainLogo from '../assets/img/logo-main.png';
import PasswordAlertModal from '../components/account/PasswordAlertModal';
import { AuthInfo } from '../apis/Auth';
import { Navigate } from 'react-router-dom';

const Main = () => {
	const token = sessionStorage.getItem('token');

	const [passwordModal, setPasswordModal] = useState('hidden');
	const homeVisited = localStorage.getItem('homeVisited');

	useEffect(() => {
		if (homeVisited) {
			new Date(homeVisited) < new Date() && handleExpiredPassword();
		} else {
			handleExpiredPassword();
		}
	}, []); // 비밀번호 만료 알림 모달 날짜 계산

	const handleExpiredPassword = async () => {
		const today = new Date();
		const guideDate = new Date(today);
		guideDate.setDate(today.getDate() + 30);

		const userInfo = await AuthInfo(token);

		userInfo && new Date(userInfo.expiredDt) < new Date(guideDate) && handlePasswordModal();
	};

	// 비밀번호 재설정 모달창
	const handlePasswordModal = () => {
		if (passwordModal === 'hidden') {
			setPasswordModal('view');
		} else {
			setPasswordModal('hidden');
		}
	};
	return (
		<>
			{token ? (
				<>
					<MainWrapper>
						<IntroBox>
							<span>Welcome To</span>
							<img src={MainLogo} alt="" />
							<div>운영툴 관리 메뉴를 선택해주세요</div>
						</IntroBox>
					</MainWrapper>
					{/* 비빌번호 만료 안내 */}
					<PasswordAlertModal stateModal={passwordModal} handleModal={handlePasswordModal} />
				</>
			) : (
				<Navigate to="/" replace={true} />
			)}
		</>
	);
};

export default Main;

const MainWrapper = styled.div`
	width: 100%;
	height: calc(100vh - 58px);
	background: rgba(246, 246, 246, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	&:before {
		content: '';
		display: block;
		width: 400px;
		height: 510px;
		/* background: #fff; */
		position: absolute;
	}
`;

const IntroBox = styled.div`
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	font-weight: 600;
	font-size: 18px;
	color: #666;
	span {
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 10px;
		color: #d9d9d9;
		display: inline-block;
		margin-bottom: 30px;
	}
	img {
		margin-bottom: 80px;
	}
`;
