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

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

import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
import { RetentionSearchBar } from '../../components/IndexManage/index';
import { RetentionIndexExport, RetentionIndexView } from '../../apis';

const RetentionContent = () => {
	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(new Date(d.setDate(d.getDate() - 1)).setHours(24, 0, 0, 0));

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

	const [sendDate, setSendDate] = useState(START_DATE);
	const [finishDate, setFinishDate] = useState(END_DATE);
	const [excelBtn, setExcelBtn] = useState(true); //true 시 비활성화

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

	// Retention 지표 데이터
	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 RetentionIndexView(token, startDateToLocal, endDateToLocal));

		console.log(dataList);

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

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

	// 엑셀 다운로드
	const handleXlsxExport = () => {
		const fileName = 'Caliverse_Retention_Index.xlsx';

		if(!excelBtn){
			RetentionIndexExport(token, fileName, sendDate, finishDate);
		} 		
	};

	return (
		<>
			<RetentionSearchBar setResultData={setResultData} resultData={resultData} 
				handleSearch={handleSearch} fetchData={fetchData} setRetention={setRetention} setExcelBtn={setExcelBtn} />
			<TableInfo>
				<ListOption>
					<Button 
						theme={excelBtn === true ? "disable" : "line"} 
						text="엑셀 다운로드" 
						disabled={handleXlsxExport}
						handleClick={handleXlsxExport} />
				</ListOption>
			</TableInfo>
			<IndexTableWrap>
				<TableStyle>
					<caption></caption>
					<thead>
						<tr>
							{/* <th width="100">국가</th> */}
							<th width="150">일자</th>
							<th className="cell-nru">NRU</th>
							{[...Array(Number(retentionData))].map((value, index) => {
								return <th key={index}>{`D+${index + 1}`}</th>;
							})}
						</tr>
					</thead>
					<tbody>
						{dataList.retention &&
							dataList.retention.map(data => (
								<tr className="cell-nru-th" key={data.date}>
									<td>{data.date}</td>
									{data['d-day'].map((day, index) => (
										<td key={index}>{day.dif}</td>
									))}
								</tr>
							))}
					</tbody>
				</TableStyle>
			</IndexTableWrap>
		</>
	);
};

export default RetentionContent;
