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

import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
import { DailyDashBoard } from '../../components/IndexManage/index';

import { userIndexView } from '../../apis';
import { ExcelDownButton } from '../common';
import { useTranslation } from 'react-i18next';
import { formatStringDate } from '../../utils';
import { AnimatedPageWrapper } from '../common/Layout';
import { UserIndexSearchBar } from '../searchBar';

const UserContent = () => {
	const token = sessionStorage.getItem('token');
	const { t } = useTranslation();
	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 [loading, setLoading] = useState(false);

	const tableRef = useRef(null);

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

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

	// 이용자 지표 데이터
	const fetchData = async (startDate, endDate) => {
		setLoading(true);

		const startDateToLocal = formatStringDate(startDate);
		const endDateToLocal = formatStringDate(endDate);

		await userIndexView(token, startDateToLocal, endDateToLocal).then(data => {
			setDataList(data);
			setLoading(false);
		});

	};

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

	return (
		<AnimatedPageWrapper>
			<DailyDashBoard />
			<UserIndexSearchBar setResultData={setResultData} resultData={resultData} handleSearch={handleSearch} fetchData={fetchData} />
			<TableInfo>
				<ListOption>
					<ExcelDownButton tableRef={tableRef} fileName={t('FILE_INDEX_USER_CONTENT')} />
				</ListOption>
			</TableInfo>
			<IndexTableWrap>
				<TableStyle ref={tableRef}>
					<caption></caption>
					<thead>
						<tr>
							{/*<th width="100">국가</th>*/}
							<th width="120">일자</th>
							<th width="100">NRU</th>
							<th width="100">UGQ(생성)</th>
							<th width="100">DGLC</th>
							<th width="100">DAU</th>
							<th width="100">MCU</th>
							<th width="100">총 Playtime(HR)</th>
							<th width="100">평균 Playtime</th>
							<th width="100">WAU</th>
							<th width="100">MAU</th>
							<th width="100">ServerCount</th>
							<th width="100">DB Read Count</th>
							<th width="100">DB Write Count</th>
							<th width="100">DB Sum</th>
							{/*<th width="200">PU</th>*/}
						</tr>
					</thead>
					<tbody>
						{dataList &&
							dataList.map((data, index) => (
								<tr key={index}>
									{/*<td rowSpan={data.length}>ALL</td>*/}
									<td>{data.date}</td>
									<td>{data.nru}</td>
									<td>{data.ugqCreate}</td>
									<td>{data.dglc}</td>
									<td>{data.dau}</td>
									<td>{data.mcu}</td>
									<td>{Math.ceil(data.playtime / 3600) || 0}</td>
									<td>{Math.round(((data.playtime / 3600) / data.dau) * 100) / 100 || 0}</td>
									<td>{data.wau}</td>
									<td>{data.mau}</td>
									<td>{data.serverCount}</td>
									<td>{data.readCapacity}</td>
									<td>{data.writeCapacity}</td>
									<td>{data.readCapacity + data.writeCapacity}</td>
								</tr>
							))}
					</tbody>
				</TableStyle>
			</IndexTableWrap>
		</AnimatedPageWrapper>
	);
};

export default UserContent;