import { useState, useEffect } from 'react';
import styled from 'styled-components';
import Modal from '../common/modal/Modal';
import Button from '../common/button/Button';

import { Title, BtnWrapper, ButtonClose } from '../../styles/Components';
import { AuthInfo } from '../../apis/Auth';

const PasswordAlertModal = ({ setStateModal, stateModal, handleModal }) => {
	const [infoData, setInfoData] = useState([]);

	const fetchData = async () => {
		const token = sessionStorage.getItem('token');
		setInfoData(await AuthInfo(token));
	};

	useEffect(() => {
		fetchData();
	}, []);

	const handleModalDate = () => {
		const today = new Date();
		const delayDate = new Date(today);
		delayDate.setDate(today.getDate() + 1);

		localStorage.setItem('homeVisited', delayDate);
		handleModal('hidden');
	};

	return (
		<>
			<Modal $padding="30px" $view={stateModal}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={() => handleModal('hidden')} />
				</BtnWrapper>
				<Title $align="center">비밀번호 변경 안내</Title>
				<NoticeSummary $maxwidth="500px">
					<table>
						<tbody>
							<tr>
								<th>대상 ID</th>
								<td>{infoData.email}</td>
							</tr>
							<tr>
								<th>대상 이름</th>
								<td>{infoData.name}</td>
							</tr>
							<tr>
								<th>비밀번호 만료일</th>
								<td>{infoData.expiredDt && infoData.expiredDt.split('T')[0]}</td>
							</tr>
						</tbody>
					</table>
				</NoticeSummary>
				<NoticeDetail>
					개인정보보호와 운영 보안을 위해 비밀번호 변경을 권장합니다.
					<br />
					비밀번호 변경 기간이 만료되면 로그인이 차단됩니다.
					<br />
					[지금 변경하기] 버튼을 누르면 비밀번호 재설정 화면으로 이동됩니다.
				</NoticeDetail>
				<BtnWrapper $gap="5px;">
					<Button
						text="지금 변경하기"
						theme="primary"
						size="large"
						width="100%"
						handleClick={e => {
							e.preventDefault();
							window.location.href = '/account/edit';
						}}
					/>
					<Button
						text="나중에 변경하기"
						theme="line"
						size="large"
						width="100%"
						handleClick={e => {
							e.preventDefault();
							handleModalDate();
						}}
					/>
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default PasswordAlertModal;

const NoticeSummary = styled.div`
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 20px 40px;
	margin-bottom: 20px;
	max-width: ${props => props.$maxwidth || 'auto'};
	table {
		th {
			text-align: left;
			font-weight: 600;
		}
		th,
		td {
			padding: 8px 0;
		}
	}
`;
const NoticeDetail = styled.div`
	background: #f6f6f6;
	padding: 30px 20px;
	margin-bottom: 20px;
	line-height: 2;
	text-align: ${props => props.$align || 'left'};
`;
