import { useState, useEffect, Fragment } from 'react';

import styled from 'styled-components';
import Button from '../../components/common/button/Button';
import QuestDetailModal from '../../components/DataManage/QuestDetailModal';
import { UserQuestView } from '../../apis/Users';
import { convertKTC } from '../../utils';
import { TableSkeleton } from '../Skeleton/TableSkeleton';

const UserQuestInfo = ({ userInfo }) => {
	const [detailPop, setDetailPop] = useState('hidden');
	const [dataList, setDataList] = useState({});
	const [detailQuest, setDetailQuest] = useState({});
	const [loading, setLoading] = useState(true);

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

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

	const handleClick = data => {
		if (detailPop === 'hidden') {
			setDetailPop('view');
			setDetailQuest(data.detailQuest);
		} else setDetailPop('hidden');
	};

	return (
		loading ? <TableSkeleton /> :
		<>
			<UserTableWrapper>
				<QuestTable>
					<thead>
						<tr>
							<th width="80">퀘스트 ID</th>
							<th width="40%">퀘스트명</th>
							<th width="100">타입</th>
							<th width="80">상태</th>
							<th width="150">수령 시간</th>
							<th width="150">완료 시간</th>
							<th width="80">상세보기</th>
						</tr>
					</thead>
					<tbody>
						{dataList.quest_list &&
							dataList.quest_list.map((el, index) => {
								return (
									<Fragment key={index}>
										<tr>
											<td>{el.quest_id}</td>
											<td>{el.quest_name}</td>
											<td>{el.quest_type}</td>
											<td>{el.status}</td>
											<td>{convertKTC(el.quest_assign_time, false)}</td>
											<td>{convertKTC(el.quest_complete_time, false)}</td>
											<td>
												<Button text="상세보기" theme="line" handleClick={() => handleClick(el)} />
											</td>
										</tr>
									</Fragment>
								);
							})}
					</tbody>
				</QuestTable>
			</UserTableWrapper>
			<QuestDetailModal detailPop={detailPop} handleClick={handleClick} detailQuest={detailQuest} />
		</>
	);
};
export default UserQuestInfo;

const UserDefaultTable = styled.table`
	border: 1px solid #e8eaec;
	border-top: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;
	th {
		background: #efefef;
		font-weight: 700;
	}
	th,
	td {
		padding: 12px;
		text-align: center;
		border-left: 1px solid #e8eaec;
		vertical-align: middle;
	}
	td {
		background: #fff;
		border-bottom: 1px solid #e8eaec;
		word-break: break-all;
	}
	button {
		height: 24px;
		font-size: 13px;
	}
`;

const QuestTable = styled(UserDefaultTable)`
	tbody {
		td {
			padding: 9px 12px;
		}
	}
`;

const UserTableWrapper = styled.div`
	width: 100%;
	overflow: auto;
	margin-bottom: 40px;
	${UserDefaultTable}, ${QuestTable} {
		margin-bottom: 0;
	}
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;
