import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import styled from 'styled-components';
import Profile from '../../assets/img/datamanage/img-profile.png';
import NicknameChangeModal from '../../components/DataManage/NicknameChangeModal';
import EditIcon from '../../assets/img/icon/icon-edit.png';
import { UserChangeAdminLevel, UserInfoView } from '../../apis/Users';
import { SelectInput } from '../../styles/Components';
import { adminLevelType, authType, modalTypes } from '../../assets/data';
import DynamicModal from '../common/modal/DynamicModal';
import { useTranslation } from 'react-i18next';
import { useRecoilValue } from 'recoil';
import { authList } from '../../store/authList';
import { convertKTC } from '../../utils';
import { EditButton, ProfileWrapper, UserDefault, UserInfoTable } from '../../styles/ModuleComponents';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { UserInfoSkeleton } from '../Skeleton/UserInfoSkeleton';

const UserDefaultInfo = ({ userInfo }) => {
	const { t } = useTranslation();
	const authInfo = useRecoilValue(authList);

	const [pwPop, setPwPop] = useState('hidden');
	const [gmModal, setGmModal] = useState('hidden');
	const [dataList, setDataList] = useState({});
	const [adminLevel, setAdminLevel] = useState('0');
	const [loading, setLoading] = useState(true);

	const handleClick = () => {
		if (pwPop === 'hidden') setPwPop('view');
		else setPwPop('hidden');
	};

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

	const fetchData = async () => {
		const token = sessionStorage.getItem('token');
		await UserInfoView(token, userInfo.guid).then(data => {
			setDataList(data);
			setLoading(false);
		});
	};

	const handleGMChange = (e) =>{
		setAdminLevel(e.target.value);
		setGmModal('view');
	}

	const handleSubmit = async () => {
		const token = sessionStorage.getItem('token');
		let params = {};
		params.guid = userInfo.guid;
		params.admin_level = adminLevel;

		await UserChangeAdminLevel(token, params);

		handleCancel();
		await fetchData();
	}

	const handleCancel = () => {
		setGmModal('hidden');
	}

	return (
		loading ? <UserInfoSkeleton /> :
		<>
			<div>
				<UserDefault>
					<ProfileWrapper>
						<img src={Profile} alt="" />
					</ProfileWrapper>
					<UserInfoTable $maxwidth="530px">
						<tbody>
							<tr>
								<th>AID(GUID)</th>
								<td>{dataList.user_info && dataList.user_info.aid}</td>
							</tr>
							<tr>
								<th>계정 ID</th>
								<td>{dataList.user_info && dataList.user_info.user_id}</td>
							</tr>
							<tr>
								<th>국가</th>
								<td>{dataList.user_info && dataList.user_info.nation}</td>
							</tr>
							<tr>
								<th>멤버십</th>
								<td>{dataList.user_info && dataList.user_info.membership}</td>
							</tr>
							<tr>
								<th>친구 추천코드</th>
								<td>{dataList.user_info && dataList.user_info.friend_code}</td>
							</tr>
							<tr>
								<th>계정 생성일</th>
								<td>
									{dataList.user_info && convertKTC(dataList.user_info.create_dt)}
								</td>
							</tr>
							<tr>
								<th>최근 접속일자</th>
								<td>
									{/*{dataList.user_info && String(new Date(new Date(dataList.user_info.access_dt).setHours(new Date(dataList.user_info.access_dt).getHours() + 9)).toLocaleString())}*/}
									{dataList.user_info && convertKTC(dataList.user_info.access_dt)}
								</td>
							</tr>
							<tr>
								<th>최근 종료일자</th>
								<td>{dataList.user_info && convertKTC(dataList.user_info.end_dt)}</td>
							</tr>
							<tr>
								<th>전자지갑 URL</th>
								<td>
									<Link>{dataList.user_info && dataList.user_info.wallet_url}</Link>
								</td>
							</tr>
							<tr>
								<th>GM권한</th>
								<td>
									<SelectInput value={dataList.user_info && dataList.user_info.admin_level} onChange={(e) => handleGMChange(e)} disabled={authInfo.auth_list && !authInfo.auth_list.some(auth => auth.id === authType.userSearchUpdate)} >
										{adminLevelType.map((data, index) => (
											<option key={index} value={data.value}>
												{data.name}
											</option>
										))}
									</SelectInput>
								</td>
							</tr>
						</tbody>
					</UserInfoTable>
				</UserDefault>
				<UserInfoTable $maxwidth="720px">
					<colgroup>
						<col />
						<col />
						<col width="120" />
						<col />
					</colgroup>
					<tbody>
						<tr>
							<th>캐릭터 아바타명</th>
							<td colSpan="3">
								{dataList.char_info && dataList.char_info.character_name}
								<EditButton
									hidden={true}
									onClick={e => {
										e.preventDefault();
										handleClick();
									}}></EditButton>
							</td>
						</tr>
						<tr>
							<th>시즌 패스 레벨</th>
							<td colSpan="3">{dataList.char_info && dataList.char_info.level}</td>
						</tr>
						<tr>
							<th>골드</th>
							<td>{dataList.char_info && dataList.char_info.gold_cali}</td>
							<th>사파이어</th>
							<td>{dataList.char_info && dataList.char_info.blue_cali}</td>
						</tr>
						<tr>
							<th>칼리움</th>
							<td>{dataList.char_info && dataList.char_info.red_cali}</td>
							<th>루비</th>
							<td>{dataList.char_info && dataList.char_info.black_cali}</td>
						</tr>
					</tbody>
				</UserInfoTable>
			</div>
			<NicknameChangeModal pwPop={pwPop} handleClick={handleClick} dataList={dataList} />
			<DynamicModal
				modalType={modalTypes.childOkCancel}
				view={gmModal}
				modalText={t('USER_GM_CHANGE')}
				handleCancel={handleCancel}
				handleSubmit={handleSubmit}
			/>
		</>
	);
};
export default UserDefaultInfo;