import { useEffect, useState } from 'react';

import { AnimatedPageWrapper } from '../../components/common/Layout'

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

import {
	Title,
	TabScroll, TabItem, TabWrapper,
} from '../../styles/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';
import ItemLogContent from '../../components/DataManage/ItemLogContent';
import CurrencyItemLogContent from '../../components/DataManage/CurrencyItemLogContent';
import UserCreateLogContent from '../../components/DataManage/UserCreateLogContent';
import UserLoginLogContent from '../../components/DataManage/UserLoginLogContent';

registerLocale('ko', ko);

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);
		}
	}, []);

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

	return (
		<AnimatedPageWrapper>
			<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>
			<CurrencyLogContent active={activeTab === 'CURRENCY'} />
			<ItemLogContent active={activeTab === 'ITEM'} />
			<CurrencyItemLogContent active={activeTab === 'CURRENCYITEM'} />
			<UserCreateLogContent active={activeTab === 'USERCREATE'} />
			<UserLoginLogContent active={activeTab === 'USERLOGIN'} />
		</AnimatedPageWrapper>
	);
};

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