import { styled } from 'styled-components';

import { Title } from '../../styles/Components';
import { BtnWrapper, TableStyle } from '../../styles/Components';
import Button from '../../components/common/button/Button';
import Modal from '../../components/common/modal/Modal';
import { useEffect, useState, Fragment } from 'react';

const QuestDetailModal = ({ detailPop, handleClick, detailQuest }) => {
	const [detailList, setDetailList] = useState([])

	useEffect(() => {
		Array.isArray(detailQuest) && setDetailList(detailQuest)
		
	}, [detailQuest])
	// const questlist = [{ taskNo: detailQuest.task_no, taskName: detailQuest.quest_name, counter: detailQuest.counter, state: detailQuest.status }];
	return (
		<>
			<Modal $view={detailPop} min="480px">
				<Title $align="center">퀘스트 상세정보</Title>
				<TableWrapper>
					<TableStyle>
						<thead>
							<tr>
								<th width="80">Task No</th>
								<th>Task Name</th>
								<th width="120">Counter</th>
								<th width="120">State</th>
							</tr>
						</thead>
						<tbody>
							{detailList && detailList.map((el, index) => {
								return (
									<Fragment key={index}>
										<tr>
											<td>{el.task_no}</td>
											<td>{el.quest_name}</td>
											<td>{el.counter}</td>
											<td>{el.status}</td>
										</tr>
									</Fragment>
								);
							})}
						</tbody>
					</TableStyle>
				</TableWrapper>
				<BtnWrapper2 $justify="center">
					<Button
						theme="line"
						text="확인"
						handleClick={e => {
							e.preventDefault();
							handleClick();
						}}
					/>
				</BtnWrapper2>
			</Modal>
		</>
	);
};

export default QuestDetailModal;

const TableWrapper = styled.div`
	max-height: 50vh;
	overflow: auto;
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

const BtnWrapper2 = styled(BtnWrapper)`
	margin-top: 30px;
`;
