import { useState } from 'react';
import { styled } from 'styled-components';
import { Link } from 'react-router-dom';
import { AnimatedPageWrapper } from '../../components/common/Layout';
import { Title } from '../../styles/Components';

import { UserContent, SegmentContent, PlayTimeContent, RetentionContent, DailyActiveUserContent, DailyMedalContent } from '../../components/IndexManage/index';
import { authType } from '../../assets/data';
import { withAuth } from '../../hooks/hook';
import { TabUserIndexList } from '../../assets/data/options';

const UserIndex = () => {
	const [activeTab, setActiveTab] = useState('USER');

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

	return (
		<AnimatedPageWrapper>
			<Title>유저 지표</Title>
			<TabWrapper>
				{TabUserIndexList.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>

			{/*{activeTab === 'DAU' && <DailyActiveUserContent />}*/}
			{activeTab === 'USER' && <UserContent />}
			{activeTab === 'RETENTION' && <RetentionContent />}
			{activeTab === 'SEGMENT' && <SegmentContent />}
			{activeTab === 'PLAYTIME' && <PlayTimeContent />}
			{/*{activeTab === '메달' && <DailyMedalContent />}*/}


		</AnimatedPageWrapper>
	);
};

export default withAuth(authType.userIndicatorsRead)(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;
		}
	}
`;

