import { useEffect, useState } from 'react';

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

import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
import { DailySearchBar } from '../../components/IndexManage/index';
import { DailyActiveUserExport, DailyActiveUserView  } 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);
	}, []);

	// DAU 데이터
	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());

		// await DailyActiveUserView(token, startDateToLocal, endDateToLocal).then(data => {
		// 	console.log(data);
		// 	setDataList(data);
		// });

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

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

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

    return (
        <>
            <DailySearchBar 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="1" width="45">
                                일자
                            </th>
                            <th colSpan="1" width="30">
                                DAU
                            </th>
                            {/*<th colSpan="1" width="30">*/}
                            {/*    DALC*/}
                            {/*</th>*/}
                            <th colSpan="1" width="30">
                                DGLC
                            </th>
                            {/*<th colSpan="1" width="30">*/}
                            {/*    MaxAU*/}
                            {/*</th>*/}
                        </tr>
                    </thead>
                    <tbody>
                    
                        {dataList && (dataList || []).map((data, index) => (
                            <tr key={index}>
                            <td>{data.date}</td>
                            <td>{data.dau}</td>
                            {/*<td>{data.dalc}</td>*/}
                            <td>{data.dglc}</td>
                            {/*<td>{data.maxAu}</td>*/}
                            </tr>
                        ))}
                    </tbody>
                </TableStyle>
            </IndexTableWrap>
        </>
    );
};

export default PlayTimeContent;

