import { useState, Fragment, useEffect } from 'react';
import { SelectInput } from '../../styles/Components';
import { UserTableWrapper, SelectWrapper, RequestTabWrapper, RequestTab, UserDefaultTable } from '../../styles/ModuleComponents';
import { UserFriendListView } from '../../apis';
import { convertKTC } from '../../utils';
import { TableSkeleton } from '../Skeleton/TableSkeleton';

const UserFriendInfo = ({ userInfo }) => {
	const [activeSection, setActiveSection] = useState('list');
	const [activeRequest, setActiveRequest] = useState('received');
	const [loading, setLoading] = useState(true);

	const [dataList, setDataList] = useState([]);

	useEffect(() => {
		fetchData();
	}, []);

	const fetchData = async () => {
		const token = sessionStorage.getItem('token');
		await UserFriendListView(token, userInfo.guid).then(data => {
			setDataList(data);
			setLoading(false);
		});
	};

	return (
		loading ? <TableSkeleton /> :
			<>
				<SelectWrapper>
					<SelectInput
						onChange={e => {
							setActiveSection(e.target.value);
						}}>
						<option value="list">친구 목록</option>
						<option value="request">친구 요청</option>
						<option value="block">차단 목록</option>
					</SelectInput>
					{activeSection === 'request' && (
						<RequestTabWrapper>
							<RequestTab
								$state={activeRequest === 'received' ? 'active' : 'inactive'}
								onClick={e => {
									e.preventDefault();
									setActiveRequest('received');
								}}>
								받은 요청
							</RequestTab>
							<RequestTab
								$state={activeRequest === 'sended' ? 'active' : 'inactive'}
								onClick={e => {
									e.preventDefault();
									setActiveRequest('sended');
								}}>
								보낸 요청
							</RequestTab>
						</RequestTabWrapper>
					)}
				</SelectWrapper>
				{activeSection === 'list' && (
					<>
						<UserTableWrapper>
							<UserDefaultTable>
								<thead>
								<tr>
									<th width="70">번호</th>
									<th width="200">친구 닉네임</th>
									<th width="300">친구 GUID</th>
									<th width="100">국가(언어)</th>
									<th width="160">친구 수락일</th>
								</tr>
								</thead>
								<tbody>
								{dataList && dataList.friend_list &&
									dataList.friend_list.map((data, idx) => (
										<Fragment key={idx}>
											<tr>
												<td>{data.row_num}</td>
												<td>{data.friend_name}</td>
												<td>{data.friend_guid}</td>
												<td>{data.language}</td>
												<td>{data.receive_dt && convertKTC(data.receive_dt)}</td>
											</tr>
										</Fragment>
									))}
								</tbody>
							</UserDefaultTable>
						</UserTableWrapper>
					</>
				)}
				{activeSection === 'request' && (
					<>
						{activeRequest === 'received' && (
							<>
								<UserDefaultTable>
									<thead>
									<tr>
										<th width="70">번호</th>
										<th width="200">요청자 닉네임</th>
										<th width="300">요청자 GUID</th>
										<th width="100">국가(언어)</th>
										<th width="160">받은 일자</th>
									</tr>
									</thead>
									<tbody>
									{dataList && dataList.friend_receive_list && dataList.friend_receive_list.map((data, idx) => {
										return (
											<Fragment key={idx}>
												<tr>
													<td>{data.row_num}</td>
													<td>{data.friend_name}</td>
													<td>{data.friend_guid}</td>
													<td>{data.language}</td>
													<td>{data.receive_dt && convertKTC(data.receive_dt)}</td>
												</tr>
											</Fragment>
										);
									})}
									</tbody>
								</UserDefaultTable>
							</>
						)}
						{activeRequest === 'sended' && (
							<>
								<UserTableWrapper>
									<UserDefaultTable>
										<thead>
										<tr>
											<th width="70">번호</th>
											<th width="200">요청 대상자 닉네임</th>
											<th width="300">요청 대상자 GUID</th>
											<th width="100">국가(언어)</th>
											<th width="160">요청일</th>
										</tr>
										</thead>
										<tbody>
										{dataList && dataList.friend_send_list && dataList.friend_send_list.map((data, idx) => {
											return (
												<Fragment key={idx}>
													<tr>
														<td>{data.row_num}</td>
														<td>{data.friend_name}</td>
														<td>{data.friend_guid}</td>
														<td>{data.language}</td>
														<td>{data.receive_dt && convertKTC(data.receive_dt)}</td>
													</tr>
												</Fragment>
											);
										})}
										</tbody>
									</UserDefaultTable>
								</UserTableWrapper>
							</>
						)}
					</>
				)}
				{activeSection === 'block' && (
					<>
						<UserTableWrapper>
							<UserDefaultTable>
								<thead>
								<tr>
									<th width="70">번호</th>
									<th width="200">차단 닉네임</th>
									<th width="300">차단 대상 GUID</th>
									<th width="100">국가(언어)</th>
									<th width="160">차단 일자</th>
								</tr>
								</thead>
								<tbody>
								{dataList && dataList.friend_block_list && dataList.friend_block_list.map((data, idx) => {
									return (
										<Fragment key={idx}>
											<tr>
												<td>{data.row_num}</td>
												<td>{data.friend_name}</td>
												<td>{data.friend_guid}</td>
												<td>{data.language}</td>
												<td>{data.receive_dt && convertKTC(data.receive_dt)}</td>
											</tr>
										</Fragment>
									);
								})}
								</tbody>
							</UserDefaultTable>
						</UserTableWrapper>
					</>
				)}
				{/*{loading && <Loading/>}*/}
			</>
	);
};

export default UserFriendInfo;
