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

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

import { registerLocale } from 'react-datepicker';
import { ko } from 'date-fns/esm/locale';
import 'react-datepicker/dist/react-datepicker.css';

import {
	Title,
	SelectInput,
	TableStyle,
	TableInfo,
	ListCount,
	ListOption,
	TabScroll, TabItem, TabWrapper,
} from '../../styles/Components';
import { styled } from 'styled-components';

import { withAuth } from '../../hooks/hook';
import { authType } from '../../assets/data';
import { TabGameLogList } from '../../assets/data/options';
import CurrencyLogContent from '../../components/DataManage/CurrencyLogContent';
import { STORAGE_GAME_LOG_CURRENCY_SEARCH } from '../../assets/data/adminConstants';

registerLocale('ko', ko);

const ItemLogContent = () => {
	const mokupData = [
		{
			date: '2023-08-05 12:11:32',
			name: '칼리버스',
			id: '16CD2ECD-4798-46CE-9B6B-F952CF11F196',
			action: '획득',
			route: '아이템 제작',
			itemName: 'Item_name',
			serialNumber: 'Serial_number',
			itemCode: 'Item_code',
			count: 1,
			key: 'User_trade_key',
		},
	];
	return (
		<>
			<TableInfo>
				<ListCount>총 : 117건 / 000 건</ListCount>
				<ListOption>
					<SelectInput name="" id="" className="input-select">
						<option value="up">오름차순</option>
						<option value="down">내림차순</option>
					</SelectInput>
					<SelectInput name="" id="" className="input-select">
						<option value="up">50개</option>
						<option value="down">100개</option>
					</SelectInput>
					<Button theme="line" text="엑셀 다운로드" />
				</ListOption>
			</TableInfo>
			<TableWrapper>
				<TableStyle>
					<caption></caption>
					<thead>
						<tr>
							<th width="150">일자</th>
							<th width="200">아바타명</th>
							<th width="300">GUID</th>
							<th width="100">액션</th>
							<th width="150">획득/소진경로</th>
							<th width="200">아이템명</th>
							<th width="200">시리얼 넘버</th>
							<th width="200">고유코드</th>
							<th width="80">개수</th>
							<th width="300">거래 key</th>
						</tr>
					</thead>
					<tbody>
						{mokupData.map((data, index) => (
							<Fragment key={index}>
								<tr>
									<td>{new Date(data.date).toLocaleString()}</td>
									<td>{data.name}</td>
									<td>{data.id}</td>
									<td>{data.action}</td>
									<td>{data.route}</td>
									<td>{data.itemName}e</td>
									<td>{data.serialNumber}</td>
									<td>{data.itemCode}</td>
									<td>{data.count}</td>
									<td>{data.key}</td>
								</tr>
							</Fragment>
						))}
					</tbody>
				</TableStyle>
			</TableWrapper>
			<Pagination />
		</>
	);
};

const GameLogView = () => {
	const [activeTab, setActiveTab] = useState('CURRENCY');

	useEffect(() => {
		const paramsData = sessionStorage.getItem(STORAGE_GAME_LOG_CURRENCY_SEARCH);

		if (paramsData) {
			const searchData = JSON.parse(paramsData);

			setActiveTab(searchData.tab);
			console.log(searchData);
		}
	}, []);

	const handleTab = (e, content) => {
		e.preventDefault();
		setActiveTab(content);
	};

	return (
		<>
			<Title>게임 로그 조회</Title>
			<TabScroll>
				<TabWrapper>
					{TabGameLogList.map((el, idx) => {
						return (
							<li key={idx}>
								<TabItem $state={activeTab === el.value ? 'active' : 'none'} onClick={e => handleTab(e, el.value)}>
									{el.name}
								</TabItem>
							</li>
						)
					})}
				</TabWrapper>
			</TabScroll>
			{/*{activeTab === 'ITEM' && <ItemLogContent />}*/}
			<CurrencyLogContent active={activeTab === 'CURRENCY'} />
			{/*{activeTab === 'TRADE' && <TradeLogContent />}*/}
		</>
	);
};

export default withAuth(authType.gameLogRead)(GameLogView);

const TableWrapper = styled.div`
	width: 100%;
	min-width: 680px;
	overflow: auto;
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
	${TableStyle} {
		width: 100%;
		min-width: max-content;
	}
`;
