import styled from 'styled-components';
import { useState, useEffect } from 'react';
import { UserAvatarView } from '../../apis/Users';
import { TableSkeleton } from '../Skeleton/TableSkeleton';

const UserAvatarInfo = ({ userInfo }) => {
	const [dataList, setDataList] = useState();
	const [loading, setLoading] = useState(true);

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

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

	return (
		loading ? <TableSkeleton width='25%' count={20}/> :
		<>
			<Notice>* 아바타 항목의 모든 항목은 ID 및 코드로 노출됩니다.</Notice>
			<AvatarWrapper>
				<UserInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="30%" />
						<col width="120" />
						<col width="30%" />
					</colgroup>
					<tbody>
						<tr>
							<th>아바타 ID</th>
							<td colSpan="3">{dataList && dataList.avatar_info.character_id}</td>
						</tr>
						<tr>
							<th>기본 외형</th>
							<td colSpan="3">{dataList && dataList.avatar_info.basicstyle}</td>
						</tr>
						<tr>
							<th>체형 타입</th>
							<td colSpan="3">{dataList && dataList.avatar_info.bodyshape}</td>
						</tr>
						<tr>
							<th>헤어스타일</th>
							<td>{dataList && dataList.avatar_info.hairstyle}</td>
							<th>헤어 컬러</th>
							<td>{dataList && dataList.avatar_info.haircolor}</td>
						</tr>
						<tr>
							<th>나이</th>
							<td colSpan="3">{dataList && dataList.avatar_info.age}</td>
						</tr>
					</tbody>
				</UserInfoTable>

				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
					<tr>
						<th>얼굴 윤곽</th>
						<td>
							<UserFaceDetailInfoTable>
								<colgroup>
									<col width="120" />
									<col width="100%" />
								</colgroup>
								<tbody>
								<tr>
									<th>얼굴 길이</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[0]}</td>
								</tr>
								<tr>
									<th>이마 돌출</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[1]}</td>
								</tr>
								<tr>
									<th>볼 라인</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[2]}</td>
								</tr>
								<tr>
									<th>광대 좌우</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[3]}</td>
								</tr>
								<tr>
									<th>광대 상하</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[4]}</td>
								</tr>
								<tr>
									<th>광대 돌출</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[5]}</td>
								</tr>
								</tbody>
							</UserFaceDetailInfoTable>
						</td>
					</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
					<tr>
						<th>턱</th>
						<td>
							<UserFaceDetailInfoTable>
								<colgroup>
									<col width="120" />
									<col width="100%" />
								</colgroup>
								<tbody>
								<tr>
									<th>앞턱 넓이 좌우</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[6]}</td>
								</tr>
								<tr>
									<th>앞턱 상하</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[7]}</td>
								</tr>
								<tr>
									<th>앞턱 전후</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[8]}</td>
								</tr>
								<tr>
									<th>뒷턱 돌출</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[9]}</td>
								</tr>
								<tr>
									<th>뒷턱 상하</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[10]}</td>
								</tr>
								<tr>
									<th>뒷턱 넓이 좌우</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[11]}</td>
								</tr>
								</tbody>
							</UserFaceDetailInfoTable>
						</td>
					</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
					<tr>
						<th>눈</th>
						<td>
							<UserFaceDetailInfoTable>
								<colgroup>
									<col width="120" />
									<col width="100%" />
								</colgroup>
								<tbody>
								<tr>
									<th>눈 사이 간격</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[12]}</td>
								</tr>
								<tr>
									<th>눈 높이 상하</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[13]}</td>
								</tr>
								<tr>
									<th>눈 각도</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[14]}</td>
								</tr>
								<tr>
									<th>눈 크기</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[15]}</td>
								</tr>
								</tbody>
							</UserFaceDetailInfoTable>
						</td>
					</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
					<tr>
						<th>눈썹</th>
						<td>
							<UserFaceDetailInfoTable>
								<colgroup>
									<col width="120" />
									<col width="100%" />
								</colgroup>
								<tbody>
								<tr>
									<th>눈썹뼈 돌출</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[16]}</td>
								</tr>
								<tr>
									<th>넓이</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[17]}</td>
								</tr>
								<tr>
									<th>높이</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[18]}</td>
								</tr>
								<tr>
									<th>각도</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[19]}</td>
								</tr>
								<tr>
									<th>두께</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[20]}</td>
								</tr>
								</tbody>
							</UserFaceDetailInfoTable>
						</td>
					</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
					<tr>
						<th>코</th>
						<td>
							<UserFaceDetailInfoTable>
								<colgroup>
									<col width="120" />
									<col width="100%" />
								</colgroup>
								<tbody>
								<tr>
									<th>코 높이 상하</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[21]}</td>
								</tr>
								<tr>
									<th>콧대 돌출</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[22]}</td>
								</tr>
								<tr>
									<th>코볼</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[23]}</td>
								</tr>
								</tbody>
							</UserFaceDetailInfoTable>
						</td>
					</tr>
					</tbody>
				</UserFaceInfoTable>

				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
					<tr>
						<th>입</th>
						<td>
							<UserFaceDetailInfoTable>
								<colgroup>
									<col width="120" />
									<col width="100%" />
								</colgroup>
								<tbody>
								<tr>
									<th>상하</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[24]}</td>
								</tr>
								<tr>
									<th>넓이 좌우</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[25]}</td>
								</tr>
								<tr>
									<th>윗입술 두께</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[26]}</td>
								</tr>
								<tr>
									<th>아랫입술 두께</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[27]}</td>
								</tr>
								<tr>
									<th>윗입술 넓이</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[28]}</td>
								</tr>
								<tr>
									<th>아랫입술 넓이</th>
									<td>{dataList && dataList.avatar_info.facesCustomizing[29]}</td>
								</tr>
								</tbody>
							</UserFaceDetailInfoTable>
						</td>
					</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
						<tr>
							<th>귀</th>
							<td>
								<UserFaceDetailInfoTable>
									<colgroup>
										<col width="120" />
										<col width="100%" />
									</colgroup>
									<tbody>
										<tr>
											<th>뾰족귀(엘프귀)</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[30]}</td>
										</tr>

										<tr>
											<th>귓볼(부처귀)</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[31]}</td>
										</tr>
										<tr>
											<th>귀 각도</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[32]}</td>
										</tr>
									</tbody>
								</UserFaceDetailInfoTable>
							</td>
						</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
						<tr>
							<th>헤어 루트컬러</th>
							<td>
								<UserFaceDetailInfoTable>
									<colgroup>
										<col width="120" />
										<col width="100%" />
									</colgroup>
									<tbody>
										<tr>
											<th>RED</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[33]}</td>
										</tr>

										<tr>
											<th>GREEN</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[34]}</td>
										</tr>
										<tr>
											<th>BLUE</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[35]}</td>
										</tr>
									</tbody>
								</UserFaceDetailInfoTable>
							</td>
						</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
						<tr>
							<th>헤어 팁 컬러</th>
							<td>
								<UserFaceDetailInfoTable>
									<colgroup>
										<col width="120" />
										<col width="100%" />
									</colgroup>
									<tbody>
										<tr>
											<th>RED</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[36]}</td>
										</tr>
										<tr>
											<th>GREEN</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[37]}</td>
										</tr>
										<tr>
											<th>BLUE</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[38]}</td>
										</tr>
									</tbody>
								</UserFaceDetailInfoTable>
							</td>
						</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
						<tr>
							<th>헤어 컬러</th>
							<td>
								<UserFaceDetailInfoTable>
									<colgroup>
										<col width="120" />
										<col width="100%" />
									</colgroup>
									<tbody>
										<tr>
											<th>RED</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[39]}</td>
										</tr>
										<tr>
											<th>GREEN</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[40]}</td>
										</tr>
										<tr>
											<th>BLUE</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[41]}</td>
										</tr>
										<tr>
											<th>CONTRAST</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[42]}</td>
										</tr>
									</tbody>
								</UserFaceDetailInfoTable>
							</td>
						</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
						<tr>
							<th>눈썹 컬러</th>
							<td>
								<UserFaceDetailInfoTable>
									<colgroup>
										<col width="120" />
										<col width="100%" />
									</colgroup>
									<tbody>
										<tr>
											<th>RED</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[43]}</td>
										</tr>
										<tr>
											<th>GREEN</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[44]}</td>
										</tr>
										<tr>
											<th>BLUE</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[45]}</td>
										</tr>
										<tr>
											<th>ALPHA</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[46]}</td>
										</tr>
									</tbody>
								</UserFaceDetailInfoTable>
							</td>
						</tr>
					</tbody>
				</UserFaceInfoTable>
				<UserFaceInfoTable $maxwidth="600px">
					<colgroup>
						<col width="120" />
						<col width="100%" />
					</colgroup>
					<tbody>
						<tr>
							<th>홍채 컬러</th>
							<td>
								<UserFaceDetailInfoTable>
									<colgroup>
										<col width="120" />
										<col width="100%" />
									</colgroup>
									<tbody>
										<tr>
											<th>RED</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[47]}</td>
										</tr>
										<tr>
											<th>GREEN</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[48]}</td>
										</tr>
										<tr>
											<th>BLUE</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[49]}</td>
										</tr>
										<tr>
											<th>ALPHA</th>
											<td>{dataList && dataList.avatar_info.facesCustomizing[50]}</td>
										</tr>
									</tbody>
								</UserFaceDetailInfoTable>
							</td>
							
						</tr>
					</tbody>
				</UserFaceInfoTable>
				{/*
				
			
				
				<UserFaceInfoTable $maxwidth="600">
					<colgroup>
						<col width="120" />
						<col width="40%" />
						<col width="60%" />
					</colgroup>
					<tbody>
						<tr>
							<th>홍채 컬러</th>
							<tr>
								<th>RED</th>
								<td>{dataList && dataList.avatar_info.facesCustomizing[47]}</td>
							</tr>
							<tr>
								<th>GREEN</th>
								<td>{dataList && dataList.avatar_info.facesCustomizing[48]}</td>
							</tr>
							<tr>
								<th>BLUE</th>
								<td>{dataList && dataList.avatar_info.facesCustomizing[49]}</td>
							</tr>
							<tr>
								<th>ALPHA</th>
								<td>{dataList && dataList.avatar_info.facesCustomizing[50]}</td>
							</tr>
						</tr>
					</tbody>
				</UserFaceInfoTable>
				*/}
			</AvatarWrapper>
		</>
	);
};

export default UserAvatarInfo;

const Notice = styled.span`
	font-size: 13px;
	font-weight: 300;
	margin-bottom: 10px;
	display: block;
`;

const UserInfoTable = styled.table`
	width: 100%;
	max-width: ${props => props.$maxwidth || 'auto'};
	font-size: 13px;
	border-radius: 15px;
	overflow: hidden;
	tr:first-child {
		th,
		td {
			border-top: 0;
		}
	}
	th,
	td {
		height: 36px;
		vertical-align: middle;
		border-top: 1px solid #d9d9d9;
	}
	th {
		width: 120px;
		background: #888;
		color: #fff;
		font-weight: 700;
	}
	td {
		background: #fff;
		padding: 0 20px;
	}
`;

/*
width: 100%;
max-width: ${props => props.$maxwidth || 'auto'};
*/


const UserFaceInfoTable = styled.table`
	
	max-width: ${props => props.$maxwidth || 'auto'};
	font-size: 13px;
	border-radius: 15px;
	overflow: hidden;
	tr:first-child {
		th, 
		td {
			border-top: 0;
		}
	}
	th {
		height: 36px;
		vertical-align: middle;
		border-right: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
		width: 120px;
		background: #888;
		color: #fff;
		font-weight: 700;
	}

`;

const UserFaceDetailInfoTable = styled.table`
	
	max-width: ${props => props.$maxwidth || 'auto'};
	font-size: 13px;
	border-right-radius: 15px;
	overflow: hidden;
	tr:first-child {
		th, 
		td {
			border-top: 0;
		}
	}
	tr:last-child {
        td {
            border-bottom: 0;
        }
    }
	th {
		height: 36px;
		vertical-align: middle;
		border-right: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
		width: 120px;
		background: #888;
		color: #fff;
		font-weight: 700;
	}
	td {
		vertical-align: middle;
		border-bottom: 1px solid #d9d9d9;
		background: #fff;
		padding: 0 20px;
	}
`;



const AvatarWrapper = styled.div`
	${UserInfoTable}:first-child {
		margin-bottom: 40px;
	}
	${UserFaceInfoTable} {
		margin-bottom: 10px;
	}
`;
