import { useState, useEffect } from 'react';
import UserIcon from '../../../assets/img/icon/icon-profile.png';

import styled from 'styled-components';
import Modal from '../modal/Modal';
import CloseIcon from '../../../assets/img/icon/icon-close.png';
import Button from '../../common/button/Button';

import { useRecoilState } from 'recoil';
import { Link, useNavigate } from 'react-router-dom';
import { AuthLogout, AuthInfo } from '../../../apis';
import { BtnWrapper, ModalText } from '../../../styles/Components';
import { authList } from '../../../store/authList';

const Profile = () => {
	const [infoData, setInfoData] = useRecoilState(authList);
	const [errorModal, setErrorModal] = useState('hidden');

	const navigate = useNavigate();

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

		sessionStorage.removeItem('token');

		navigate('/');
	};

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

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

	// 필수값 입력 모달창
	const handleErrorModal = () => {
		if (errorModal === 'hidden') {
			setErrorModal('view');
		} else {
			setErrorModal('hidden');
		}
	};

	return (
		<>
			<ProfileWrapper>
				<UserWrapper>{infoData.name && <Username>{infoData.name.length > 20 ? infoData.name.slice(0, 20) + '...' : infoData.name}님</Username>}</UserWrapper>
				<Link>
					<LogoutBtn onClick={handleErrorModal}>로그아웃</LogoutBtn>
				</Link>
			</ProfileWrapper>
			{/* 로그아웃 확인 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={errorModal}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleErrorModal} />
				</BtnWrapper>
				<ModalText $align="center">
					로그아웃 하시겠습니까?
					<br />
					(로그아웃 시 저장되지 않은 값은 초기화 됩니다.)
				</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="취소" theme="line" size="large" width="100%" handleClick={handleErrorModal} />
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleLogout} />
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default Profile;

const ProfileWrapper = styled.div`
	background: #f6f6f6;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	word-break: break-all;
	justify-content: flex-end;
	align-items: center;
`;

const LogoutBtn = styled.button`
	color: #2c2c2c;
	line-height: 1;
	border-bottom: 0.5px solid #2c2c2c;
	font-size: 13px;
	font-weight: 300;
	border-radius: 0;
	letter-spacing: 0;
	width: max-content;
	height: max-content;
`;

const UserWrapper = styled.div`
	padding-left: 35px;
	position: relative;
	font-size: 18px;
	display: flex;

	&:before {
		background: url('${UserIcon}') 50% 50% no-repeat;
		width: 24px;
		height: 24px;
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}
`;

const Username = styled.div`
	font-weight: 700;
	padding-right: 3px;
`;

const ButtonClose = styled.button`
	width: 16px;
	height: 16px;
	background: url(${CloseIcon}) 50% 50% no-repeat;
`;
