import { useState, Fragment } from 'react';

import { TabScroll, Title } from '../../styles/Components';
import { AnimatedPageWrapper } from '../../components/common/Layout'

import styled from 'styled-components';

import UserViewSearchBar from '../../components/searchBar/UserViewSearchBar';
import UserDefaultInfo from '../../components/DataManage/UserDefaultInfo';
import UserAvatarInfo from '../../components/DataManage/UserAvatarInfo';
import UserDressInfo from '../../components/DataManage/UserDressInfo';
import UserToolInfo from '../../components/DataManage/UserToolInfo';
import UserInventoryInfo from '../../components/DataManage/UserInventoryInfo';
import UserMailInfo from '../../components/DataManage/UserMailInfo';
import UserMyHomeInfo from '../../components/DataManage/UserMyHomeInfo';
import UserFriendInfo from '../../components/DataManage/UserFriendInfo';
import UserTatttooInfo from '../../components/DataManage/UserTattooInfo';
import UserQuestInfo from '../../components/DataManage/UserQuestInfo';
import UserClaimInfo from '../../components/DataManage/UserClaimInfo';

import { useNavigate } from 'react-router-dom';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';
import AuthModal from '../../components/common/modal/AuthModal';
import { authType, TabUserList } from '../../assets/data';

const UserView = () => {
	const userInfo = useRecoilValue(authList);

	const [infoView, setInfoView] = useState('none');
	const [activeContent, setActiveContent] = useState('기본정보');
	const [resultData, setResultData] = useState([]);

	const handleTab = title => {
		setActiveContent(title);
	};

	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === authType.userSearchRead) ? (
				<AuthModal />
			) : (
				<AnimatedPageWrapper>
					<Title>유저조회</Title>
					<UserViewSearchBar setInfoView={setInfoView} resultData={resultData} handleTab={handleTab} setResultData={setResultData} />
					<UserWrapper display={infoView}>
						<TabScroll>
							<UserTabWrapper>
								{TabUserList.map((el, idx) => {
									return (
										<UserTab key={idx} $state={el.title === activeContent ? 'active' : 'unactive'} onClick={() => handleTab(el.title)}>
											{el.title}
										</UserTab>
									);
								})}
							</UserTabWrapper>
						</TabScroll>
						<UserTabInfo>
							{activeContent === '기본정보' && <UserDefaultInfo userInfo={resultData && resultData} />}
							{activeContent === '아바타' && <UserAvatarInfo userInfo={resultData && resultData} />}
							{activeContent === '의상' && <UserDressInfo userInfo={resultData && resultData} />}
							{activeContent === '도구' && <UserToolInfo userInfo={resultData && resultData} />}
							{activeContent === '인벤토리' && <UserInventoryInfo userInfo={resultData && resultData} />}
							{activeContent === '우편' && <UserMailInfo userInfo={resultData && resultData} />}
							{activeContent === '마이홈' && <UserMyHomeInfo userInfo={resultData && resultData} />}
							{activeContent === '친구목록' && <UserFriendInfo userInfo={resultData && resultData} />}
							{activeContent === '타투' && <UserTatttooInfo userInfo={resultData && resultData} />}
							{activeContent === '퀘스트' && <UserQuestInfo userInfo={resultData && resultData} />}
							{activeContent === '클레임' && <UserClaimInfo userInfo={resultData && resultData} />}
						</UserTabInfo>
					</UserWrapper>
				</AnimatedPageWrapper>
			)}
		</>
	);
};

export default UserView;

const UserTab = styled.li`
	display: flex;
	width: 100%;
	max-width: 120px;
	height: 35px;
	align-items: center;
	justify-content: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #888;
	text-align: center;
	cursor: pointer;
	&:hover {
		font-weight: 700;
		color: #fff;
		background: #888;
	}
	${props =>
		props.$state === 'active' &&
		`font-weight: 700;
		color: #fff;
		background: #888;`}
`;

const UserTabWrapper = styled.ul`
	border-bottom: 1px solid #888888;
	display: flex;
	background: #fff;
`;
const UserWrapper = styled.div`
	display: ${props => props.display};
	${props => props.display && `flex-flow:column;`}
	min-height: calc(100vh - 345px);
	overflow: hidden;
	background: #f9f9f9;
`;

const UserTabInfo = styled.div`
	padding: 50px;

	overflow: auto;
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;