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';
import { questStatus } from '../../assets/data/options';
import { commonStatus } from '../../assets/data';
import { useModal } from '../../hooks/hook';
import { alertTypes } from '../../assets/data/types';
import { useAlert } from '../../context/AlertProvider';

const QuestDetailModal = ({ detailPop, handleClick, detailQuest, handleQuestComplete }) => {
	const { showModal } = useAlert();

	const [detailList, setDetailList] = useState([])

	useEffect(() => {
		Array.isArray(detailQuest.detailQuest) && setDetailList(detailQuest.detailQuest)
		
	}, [detailQuest])

	const handleQuestCompleteConfirm = (data) => {
		const params = {...data, quest_key: detailQuest.quest_key}
		showModal('QUEST_TASK_COMPLETE_CONFIRM',{
			type: alertTypes.confirm,
			onConfirm: () => {
				handleQuestComplete(params);
			}
		});
	}
	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">상태</th>
								<th width="120">완료처리</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>{questStatus.find(data => data.value === el.status)?.name}</td>
											<td>
												{ el.status === commonStatus.running && <Button text="완료" theme="line" handleClick={() => handleQuestCompleteConfirm(el)} />}
											</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;
`;
