import React, { Fragment, useMemo, useRef, useState } from 'react';

import {
	TableStyle,
	FormWrapper,
	TableWrapper, CircularProgressWrapper, TotalRow,
} from '../../styles/Components';

import { useCurrencyIndexSearch } from '../searchBar';
import { Button, TopButton, ViewTableInfo } from '../common';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { numberFormatter } from '../../utils';
import {STORAGE_GAME_LOG_CURRENCY_SEARCH, } from '../../assets/data/adminConstants';
import ExcelExportButton from '../common/button/ExcelExportButton';
import CircularProgress from '../common/CircularProgress';
import { useTranslation } from 'react-i18next';
import CurrencyIndexSearchBar from '../searchBar/CurrencyIndexSearchBar';
import { useNavigate } from 'react-router-dom';

const CreditContent = () => {
	const { t } = useTranslation();
	const token = sessionStorage.getItem('token');
	const navigate = useNavigate();
	const tableRef = useRef(null);
	const [downloadState, setDownloadState] = useState({
		loading: false,
		progress: 0
	});

	const {
		searchParams,
		loading: dataLoading,
		data: dataList,
		handleSearch,
		handleReset,
		updateSearchParams
	} = useCurrencyIndexSearch(token);

	const tableHeaders = useMemo(() => {
		return [
			{ id: 'logDay', label: '일자', width: '100px' },
			{ id: 'accountId', label: 'account ID', width: '80px' },
			{ id: 'userGuid', label: 'GUID', width: '200px' },
			{ id: 'userNickname', label: '아바타명', width: '150px' },
			{ id: 'sapphireAcquired', label: '사파이어 획득량', width: '80px' },
			{ id: 'sapphireConsumed', label: '사파이어 소모량', width: '80px' },
			{ id: 'goldAcquired', label: '골드 획득량', width: '80px' },
			{ id: 'goldConsumed', label: '골드 소모량', width: '80px' },
			{ id: 'caliumAcquired', label: '칼리움 획득량', width: '80px' },
			{ id: 'caliumConsumed', label: '칼리움 소모량', width: '80px' },
			{ id: 'beamAcquired', label: 'BEAM 획득량', width: '80px' },
			{ id: 'beamConsumed', label: 'BEAM 소모량', width: '80px' },
			{ id: 'rubyAcquired', label: '루비 획득량', width: '80px' },
			{ id: 'rubyConsumed', label: '루비 소모량', width: '80px' },
			{ id: 'sapphireNet', label: '사파이어 계', width: '80px' },
			{ id: 'goldNet', label: '골드 계', width: '80px' },
			{ id: 'caliumNet', label: '칼리움 계', width: '80px' },
			{ id: 'beamNet', label: 'BEAM 계', width: '80px' },
			{ id: 'rubyNet', label: '루비 계', width: '80px' },
			{ id: 'totalCurrencies', label: '활동 수', width: '80px' },
			{ id: 'detail', label: '상세', width: '100px' },
		];
	}, []);

	const totals = useMemo(() => {
		if (!dataList?.currency_list?.length) return null;

		return dataList.currency_list.reduce((acc, item) => {
			return {
				sapphireAcquired: (acc.sapphireAcquired || 0) + (item.sapphireAcquired || 0),
				sapphireConsumed: (acc.sapphireConsumed || 0) + (item.sapphireConsumed || 0),
				goldAcquired: (acc.goldAcquired || 0) + (item.goldAcquired || 0),
				goldConsumed: (acc.goldConsumed || 0) + (item.goldConsumed || 0),
				caliumAcquired: (acc.caliumAcquired || 0) + (item.caliumAcquired || 0),
				caliumConsumed: (acc.caliumConsumed || 0) + (item.caliumConsumed || 0),
				beamAcquired: (acc.beamAcquired || 0) + (item.beamAcquired || 0),
				beamConsumed: (acc.beamConsumed || 0) + (item.beamConsumed || 0),
				rubyAcquired: (acc.rubyAcquired || 0) + (item.rubyAcquired || 0),
				rubyConsumed: (acc.rubyConsumed || 0) + (item.rubyConsumed || 0),
				sapphireNet: (acc.sapphireNet || 0) + (item.sapphireNet || 0),
				goldNet: (acc.goldNet || 0) + (item.goldNet || 0),
				caliumNet: (acc.caliumNet || 0) + (item.caliumNet || 0),
				beamNet: (acc.beamNet || 0) + (item.beamNet || 0),
				rubyNet: (acc.rubyNet || 0) + (item.rubyNet || 0),
				totalCurrencies: (acc.totalCurrencies || 0) + (item.totalCurrencies || 0),
			};
		}, {});
	}, [dataList?.currency_list]);

	const handleModalSubmit = async (type, param = null) => {
		switch (type) {
			case "detail":
				const params = {
					tab: "CURRENCY",
					start_dt: (() => {
						const date = new Date(param.logDay);
						return date;
					})(),
					end_dt: (() => {
						const date = new Date(param.logDay);
						date.setDate(date.getDate() + 1);
						return date;
					})(),
					guid: param.userGuid
				};

				// 복사한 데이터를 세션 스토리지에 저장
				sessionStorage.setItem(STORAGE_GAME_LOG_CURRENCY_SEARCH, JSON.stringify(params));
				navigate('/datamanage/gamelogview');
				break;
		}
	}

	return (
		<>
			<FormWrapper>
				<CurrencyIndexSearchBar
					searchParams={searchParams}
					onSearch={(newParams, executeSearch = true) => {
						if (executeSearch) {
							handleSearch(newParams);
						} else {
							updateSearchParams(newParams);
						}
					}}
					onReset={handleReset}
				/>
			</FormWrapper>
			<ViewTableInfo >
				<ExcelExportButton
					functionName="GameCurrencyLogExport"
					params={searchParams}
					fileName={t('FILE_CURRENCY_INDEX')}
					onLoadingChange={setDownloadState}
					dataSize={dataList?.length}
				/>
				{downloadState.loading && (
					<CircularProgressWrapper>
						<CircularProgress
							progress={downloadState.progress}
							size={36}
							progressColor="#4A90E2"
						/>
					</CircularProgressWrapper>
				)}
			</ViewTableInfo>
			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
				<>
					<TableWrapper>
						<TableStyle ref={tableRef}>
							<thead>
							<tr>
								{tableHeaders.map(header => (
									<th key={header.id} width={header.width}>{header.label}</th>
								))}
							</tr>
							</thead>
							<tbody>
							{totals && (
								<TotalRow>
									<td colSpan="4">합계</td>
									<td>{numberFormatter.formatCurrency(totals.sapphireAcquired)}</td>
									<td>{numberFormatter.formatCurrency(totals.sapphireConsumed)}</td>
									<td>{numberFormatter.formatCurrency(totals.goldAcquired)}</td>
									<td>{numberFormatter.formatCurrency(totals.goldConsumed)}</td>
									<td>{numberFormatter.formatCurrency(totals.caliumAcquired)}</td>
									<td>{numberFormatter.formatCurrency(totals.caliumConsumed)}</td>
									<td>{numberFormatter.formatCurrency(totals.beamAcquired)}</td>
									<td>{numberFormatter.formatCurrency(totals.beamConsumed)}</td>
									<td>{numberFormatter.formatCurrency(totals.rubyAcquired)}</td>
									<td>{numberFormatter.formatCurrency(totals.rubyConsumed)}</td>
									<td>{numberFormatter.formatCurrency(totals.sapphireNet)}</td>
									<td>{numberFormatter.formatCurrency(totals.goldNet)}</td>
									<td>{numberFormatter.formatCurrency(totals.caliumNet)}</td>
									<td>{numberFormatter.formatCurrency(totals.beamNet)}</td>
									<td>{numberFormatter.formatCurrency(totals.rubyNet)}</td>
									<td>{totals.totalCurrencies}</td>
									<td>-</td>
								</TotalRow>
							)}
							{dataList?.currency_list?.map((item, index) => (
								<Fragment key={index}>
									<tr>
										<td>{item.logDay}</td>
										<td>{item.accountId}</td>
										<td>{item.userGuid}</td>
										<td>{item.userNickname}</td>
										<td>{numberFormatter.formatCurrency(item.sapphireAcquired)}</td>
										<td>{numberFormatter.formatCurrency(item.sapphireConsumed)}</td>
										<td>{numberFormatter.formatCurrency(item.goldAcquired)}</td>
										<td>{numberFormatter.formatCurrency(item.goldConsumed)}</td>
										<td>{numberFormatter.formatCurrency(item.caliumAcquired)}</td>
										<td>{numberFormatter.formatCurrency(item.caliumConsumed)}</td>
										<td>{numberFormatter.formatCurrency(item.beamAcquired)}</td>
										<td>{numberFormatter.formatCurrency(item.beamConsumed)}</td>
										<td>{numberFormatter.formatCurrency(item.rubyAcquired)}</td>
										<td>{numberFormatter.formatCurrency(item.rubyConsumed)}</td>
										<td>{numberFormatter.formatCurrency(item.sapphireNet)}</td>
										<td>{numberFormatter.formatCurrency(item.goldNet)}</td>
										<td>{numberFormatter.formatCurrency(item.caliumNet)}</td>
										<td>{numberFormatter.formatCurrency(item.beamNet)}</td>
										<td>{numberFormatter.formatCurrency(item.rubyNet)}</td>
										<td>{item.totalCurrencies}</td>
										<td>
											<Button theme="line" text="상세보기"
													handleClick={e => handleModalSubmit('detail', item)} />
										</td>
									</tr>
								</Fragment>
							))}
							</tbody>
						</TableStyle>
					</TableWrapper>
					<TopButton />
				</>
			}
		</>
	);
};

export default CreditContent;