import { styled } from 'styled-components';
import { useEffect, useState } from 'react';

import { Title } from '../../styles/Components';
import { TextInput, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
import Button from '../../components/common/button/Button';
import Modal from '../../components/common/modal/Modal';
import { UserChangeNickName } from '../../apis';

const NicknameChangeModal = ({ pwPop, handleClick, dataList }) => {
	let nickName = dataList.char_info && dataList.char_info.character_name;
	const [modifyModal, setModifyModal] = useState('hidden');
	const [completeModal, setCompleteModal] = useState('hidden');
	const [completeText, setCompleteText] = useState('');

	const [resultData, setResultData] = useState({
		guid: '',
		nickname: '',
		new_nickname: '',
	});

	useEffect(() => {
		setResultData({ ...resultData, guid: dataList.user_info && dataList.user_info.aid, nickname: dataList.char_info && dataList.char_info.character_name });
	}, [dataList]);

	// 수정 모달창
	const handleModifyModal = () => {
		if (modifyModal === 'hidden') {
			setModifyModal('view');
		} else {
			setModifyModal('hidden');
		}
	};

	// 완료 모달창
	const handleCompleteModal = () => {
		if (completeModal === 'hidden') {
			setCompleteModal('view');
		} else {
			setCompleteModal('hidden');

			handleClick();
			completeText === '변경이 완료되었습니다.' && window.location.reload();
		}
	};

	// 수정
	const handleModifyNotice = async () => {
		const token = sessionStorage.getItem('token');

		const message = await UserChangeNickName(token, resultData);

		// console.log(message);
		message.data.data.message !== '수정 하였습니다.' ? setCompleteText('변경 닉네임이 이미 존재합니다.\n다시 시도해주세요.') : setCompleteText('변경이 완료되었습니다.');

		handleCompleteModal();
		handleModifyModal();
	};

	return (
		<>
			<Modal $view={pwPop} min="480px">
				<Title $align="center">닉네임 변경</Title>
				<PwSetTable>
					<colgroup>
						<col width="120" />
						<col />
					</colgroup>
					<tbody>
						<tr>
							<th>기존 닉네임</th>
							<td>{nickName}</td>
						</tr>
						<tr>
							<th>변경 닉네임</th>
							<td>
								<TextInput placeholder="닉네임을 입력하세요." onChange={e => setResultData({ ...resultData, new_nickname: e.target.value })} maxLength={12} />
								<ChangeNotice>* 최대 12글자까지 가능합니다.</ChangeNotice>
							</td>
						</tr>
					</tbody>
				</PwSetTable>
				<BtnWrapper $justify="center" $gap="10px">
					<Button theme="line" text="취소" handleClick={handleClick} />
					<Button theme="primary" text="변경하기" handleClick={handleModifyModal} />
				</BtnWrapper>
			</Modal>

			{/* 확인 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={modifyModal}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleModifyModal} />
				</BtnWrapper>
				<ModalText $align="center">닉네임을 변경하시겠습니까?</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="취소" theme="line" size="large" width="100%" handleClick={handleModifyModal} />
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleModifyNotice} />
				</BtnWrapper>
			</Modal>
			{/* 완료 모달 */}
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={completeModal}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleCompleteModal} />
				</BtnWrapper>
				<ModalText $align="center">{completeText}</ModalText>
				<BtnWrapper $gap="10px">
					<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleCompleteModal} />
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default NicknameChangeModal;
const PwSetTable = styled.table`
	width: 400px;
	margin: 30px 0;
	th,
	td {
		padding: 10px 0;
	}
`;
const ChangeNotice = styled.span`
	font-size: 12px;
	font-weight: 300;
	color: ${props => props.$color || '#999'};
	margin-top: 10px;
	display: block;
`;