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

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

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

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

	return (
		loading ? <TableSkeleton count={10}/> :
		<>
			<UserTableWrapper>
				<UserDefaultTable>
					<thead>
						<tr>
							<th width="100">장착슬롯</th>
							<th width="150">타투 ID</th>
							<th width="200">타투명</th>
							{/*<th width="100">등급</th>*/}
							<th width="100">레벨</th>
							{/*<th width="300">속성 및 수치</th>*/}
							{/*<th width="200">세트 효과</th>*/}
						</tr>
					</thead>
					<tbody>
						{dataList && dataList.tattoo_list &&
							dataList.tattoo_list.map((el, idx) => {
								return (
									<Fragment key={idx}>
										<tr>
											<td>{el.slot}</td>
											<td>{el.item_id}</td>
											<td>{el.item_name}</td>
											{/*<td>{el.grade}</td>*/}
											<td>{el.level}</td>
											{/*<td>{el.property}</td>*/}
											{/*<td>{el.setEffect}</td>*/}
										</tr>
									</Fragment>
								);
							})}
					</tbody>
				</UserDefaultTable>
			</UserTableWrapper>
		</>
	);
};

export default UserTatttooInfo;

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;
	}
`;

const QuestTable = styled(UserDefaultTable)`
	tbody {
		td {
			padding: 9px 12px;
		}
	}
`;
const UserTableWrapper = styled.div`
	width: 100%;
	overflow: auto;
	margin-bottom: 40px;
	${UserDefaultTable}, ${QuestTable} {
		margin-bottom: 0;
	}
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;
