import { useState, Fragment } from 'react';

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

import styled from 'styled-components';

import UserViewSearchBar from '../../components/DataManage/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 Modal from '../../components/common/modal/Modal';
import Button from '../../components/common/button/Button';

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

const UserView = () => {
	const navigate = useNavigate();
	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 />
			) : (
				<>
					<Title>유저조회</Title>
					<UserViewSearchBar setInfoView={setInfoView} resultData={resultData} handleTab={handleTab} setResultData={setResultData} />
					<UserWrapper display={infoView}>
						<TabScroll>
							<UserTabWrapper>
								{TabList.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>
				</>
			)}
		</>
	);
};

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 TabScroll = styled.div`
	width: 100%;
	overflow: auto;
`;
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;
	}
`;

const UserDefaultTable = styled.table`
	border: 1px solid #e8eaec;
	border-top: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;
	th {
		background: #efefef;
		font-weight: 700;
	}
	th,
	td {
		padding: 12px;
		text-align: center;
		border-left: 1px solid #e8eaec;
		vertical-align: middle;
	}
	td {
		background: #fff;
		border-bottom: 1px solid #e8eaec;
		word-break: break-all;
	}
	button {
		height: 24px;
		font-size: 13px;
	}
`;
