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

import Button from '../../components/common/button/Button';

import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
import { PlayTimeSearchBar } from '../../components/IndexManage/index';
import { PlaytimeIndexExport, PlaytimeIndexView } from '../../apis';

const PlayTimeContent = () => {
	const token = sessionStorage.getItem('token');
	let d = new Date();
	const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
	const END_DATE = new Date();

	const [dataList, setDataList] = useState([]);
	const [resultData, setResultData] = useState([]);

	const [sendDate, setSendDate] = useState(START_DATE);
	const [finishDate, setFinishDate] = useState(END_DATE);

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

	// 이용자 지표 데이터
	const fetchData = async (startDate, endDate) => {
		const startDateToLocal =
			startDate.getFullYear() +
			'-' +
			(startDate.getMonth() + 1 < 9 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1) +
			'-' +
			(startDate.getDate() < 9 ? '0' + startDate.getDate() : startDate.getDate());

		const endDateToLocal =
			endDate.getFullYear() +
			'-' +
			(endDate.getMonth() + 1 < 9 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) +
			'-' +
			(endDate.getDate() < 9 ? '0' + endDate.getDate() : endDate.getDate());

		setDataList(await PlaytimeIndexView(token, startDateToLocal, endDateToLocal));

		setSendDate(startDateToLocal);
		setFinishDate(endDateToLocal);
	};

	// 검색 함수
	const handleSearch = (send_dt, end_dt) => {
		fetchData(send_dt, end_dt);
	};

	// 엑셀 다운로드
	const handleXlsxExport = () => {
		const fileName = 'Caliverse_PlayTime_Index.xlsx';
		PlaytimeIndexExport(token, fileName, sendDate, finishDate);
	};

	return (
		<>
			<PlayTimeSearchBar setResultData={setResultData} resultData={resultData} handleSearch={handleSearch} fetchData={fetchData} />
			<TableInfo>
				<ListOption>
					<Button theme="line" text="엑셀 다운로드" handleClick={handleXlsxExport} />
				</ListOption>
			</TableInfo>
			<IndexTableWrap>
				<TableStyle>
					<caption></caption>
					<thead>
						<tr>
							<th rowSpan="2" width="140">
								일자
							</th>
							<th colSpan="4" width="520">
								유저수
							</th>
							<th rowSpan="2" width="160">
								총 누적 플레이타임(분)
							</th>
							<th rowSpan="2" width="160">
								1인당 평균 플레이타임(분)
							</th>
						</tr>
						<tr>
							<th>30분 이내</th>
							<th>30분 ~ 1시간</th>
							<th>1시간 ~ 3시간</th>
							<th>3시간 이상</th>
						</tr>
					</thead>
					<tbody>
						{dataList.playtime &&
							dataList.playtime.map(time => (
								<tr key={time.date}>
									<td>{time.date}</td>
									{time.user_cnt.map((cnt, index) => (
										<td className="text-left" key={index}>
											{cnt}
										</td>
									))}
									<td className="text-left">{time.total_time}</td>
									<td className="text-left">{time.average_time}</td>
								</tr>
							))}
					</tbody>
				</TableStyle>
			</IndexTableWrap>
		</>
	);
};

export default PlayTimeContent;
