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

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

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

	useEffect(() => {
		setRowData([
			{ slotType : "상의", 		smallType: '셔츠', 		itemNo : dataList?.cloth_info?.cloth_shirt?.cloth || 0, itemName: dataList?.cloth_info?.cloth_shirt?.clothName || null}, 
			{ slotType : "상의", 		smallType: '드레스', 	itemNo : dataList?.cloth_info?.cloth_dress?.cloth || 0, itemName: dataList?.cloth_info?.cloth_dress?.clothName || null}, 
			{ slotType : "외투", 		smallType: '외투', 		itemNo : dataList?.cloth_info?.cloth_outer?.cloth || 0, itemName: dataList?.cloth_info?.cloth_outer?.clothName || null}, 
			{ slotType : "하의", 		smallType: '바지', 		itemNo : dataList?.cloth_info?.cloth_pants?.cloth || 0, itemName: dataList?.cloth_info?.cloth_pants?.clothName || null}, 
			{ slotType : "장갑", 		smallType: '장갑', 		itemNo : dataList?.cloth_info?.cloth_gloves?.cloth || 0, itemName: dataList?.cloth_info?.cloth_gloves?.clothName || null}, 
			{ slotType : "장갑", 		smallType: '반지', 		itemNo : dataList?.cloth_info?.cloth_ring?.cloth || 0, itemName: dataList?.cloth_info?.cloth_ring?.clothName || null}, 
			{ slotType : "장갑", 		smallType: '팔찌', 		itemNo : dataList?.cloth_info?.cloth_bracelet?.cloth || 0, itemName: dataList?.cloth_info?.cloth_bracelet?.clothName || null}, 
			{ slotType : "가방", 		smallType: '가방', 		itemNo : dataList?.cloth_info?.cloth_bag?.cloth || 0,  itemName: dataList?.cloth_info?.cloth_bag?.clothName || null}, 
			{ slotType : "가방", 		smallType: '배낭', 		itemNo : dataList?.cloth_info?.cloth_backpack?.cloth || 0, itemName: dataList?.cloth_info?.cloth_backpack?.clothName || null}, 
			{ slotType : "머리 장식", 	smallType: '모자', 		itemNo : dataList?.cloth_info?.cloth_cap?.cloth || 0, 	itemName: dataList?.cloth_info?.cloth_cap?.clothName || null}, 
			{ slotType : "얼굴 장식", 	smallType: '얼굴 장식', itemNo : dataList?.cloth_info?.cloth_mask?.cloth || 0, itemName: dataList?.cloth_info?.cloth_mask?.clothName || null}, 
			{ slotType : "얼굴 장식", 	smallType: '안경', 		itemNo : dataList?.cloth_info?.cloth_glasses?.cloth || 0, itemName: dataList?.cloth_info?.cloth_glasses?.clothName || null}, 
			{ slotType : "귀걸이", 		smallType: '귀걸이', 	itemNo : dataList?.cloth_info?.cloth_earring?.cloth || 0, itemName: dataList?.cloth_info?.cloth_earring?.clothName || null}, 
			{ slotType : "목걸이", 		smallType: '목걸이', 	itemNo : dataList?.cloth_info?.cloth_necklace?.cloth || 0, itemName: dataList?.cloth_info?.cloth_necklace?.clothName || null}, 
			{ slotType : "신발", 		smallType: '신발', 		itemNo : dataList?.cloth_info?.cloth_shoes?.cloth || 0, itemName: dataList?.cloth_info?.cloth_shoes?.clothName || null}, 
			{ slotType : "양말", 		smallType: '양말', 		itemNo : dataList?.cloth_info?.cloth_socks?.cloth || 0, itemName: dataList?.cloth_info?.cloth_socks?.clothName || null}, 
			{ slotType : "양말", 		smallType: '발찌', 		itemNo : dataList?.cloth_info?.cloth_anklet?.cloth || 0, itemName: dataList?.cloth_info?.cloth_anklet?.clothName || null}
		])
	}, [dataList])

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

	const groupedData = rowData.reduce((acc, el) => {
		const key = el.slotType;
		if (!acc[key]) {
		  acc[key] = [];
		}
		acc[key].push(el);
		return acc;
	  }, {});

	return (
		loading ? <TableSkeleton width='30%' count={15} /> :
		<>
			<DressWrapper>
				<UserInfoTable $maxwidth="670px">
					<colgroup>
						<col width="100" />
						<col width="120" />
						<col width="30%" />
						<col width="50%" />
					</colgroup>
					<tbody>	
					{Object.keys(groupedData).map((key) => {
						const rows = groupedData[key];
						return rows.map((el, idx) => (
							<tr key={`${key}-${idx}`}>
							{idx === 0 && (
								<th rowSpan={rows.length}>{el.slotType}</th>
							)}
							<th>{el.smallType}</th>
							<td>{el.itemNo}</td>
							<td>{el.itemName}</td>
							</tr>
						));
					})}
					</tbody>
				</UserInfoTable>
			</DressWrapper>
		</>
	);
};

export default UserDressInfo;

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;
		border-right: 1px solid #d9d9d9;
	}
	th {
		width: 120px;
		background: #888;
		color: #fff;
		font-weight: 700;
	}
	td {
		background: #fff;
		padding: 0 20px;
	}
`;

const DressWrapper = styled.div`
	${UserInfoTable} {
		td {
			border-left: 1px solid #d9d9d9;
		}
	}
`;
