import { Fragment, useEffect, useState } from 'react';
import { styled } from 'styled-components';
import { Link, useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';

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

import { Title, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';

import { authList } from '../../store/authList';
import { userIndexView, userTotalIndex } from '../../apis';

import { UserContent, SegmentContent, PlayTimeContent, RetentionContent, DailyActiveUserContent, DailyMedalContent } from '../../components/IndexManage/index';
import AuthModal from '../../components/common/modal/AuthModal';
import { authType } from '../../assets/data';

const UserIndex = () => {
	const token = sessionStorage.getItem('token');
	const navigate = useNavigate();

	const userInfo = useRecoilValue(authList);
	const [activeTab, setActiveTab] = useState('이용자 지표');

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

	const TabList = [
		{ title: '이용자 지표' },
		// { title: 'Retention' },
		// { title: 'Segment' },
		// { title: '플레이타임' },
		// { title: 'DAU' },
		// { title: '메달' },
	];

	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === authType.userIndicatorsRead) ? (
				<AuthModal/>
			) : (
				<>
					<Title>유저 지표</Title>
					<TabWrapper>
						{TabList.map((el, idx) => {
							return (
								<TabItem 
									key={idx} 
									$state={el.title === activeTab ? 'active' : 'unactive'} 
									onClick={(e) => handleTab(e, el.title)}
								>
									{el.title}
								</TabItem>
							);
						})}
					</TabWrapper>

					{/*{activeTab === 'DAU' && <DailyActiveUserContent />}*/}
					{activeTab === '이용자 지표' && <UserContent />}
					{activeTab === 'Retention' && <RetentionContent />}
					{activeTab === 'Segment' && <SegmentContent />}
					{activeTab === '플레이타임' && <PlayTimeContent />}
					{/*{activeTab === '메달' && <DailyMedalContent />}*/}
					
					
				</>
			)}
		</>
	);
};

export default UserIndex;

const TabItem = styled(Link)`
	display: inline-flex;
	width: 120px;
	height: 30px;
	justify-content: center;
	align-items: center;
	background: #f9f9f9;
	border-left: 1px solid #d9d9d9;
	&:hover {
		background: #888;
		color: #fff;
	}
	${props =>
		props.$state === 'active' &&
		`
	background: #888;
		color: #fff;`}
`;

const TabWrapper = styled.ul`
	display: flex;
	li:first-child {
		${TabItem} {
			border-left: 0;
		}
	}
`;