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

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

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

	useEffect(() => {
		if(dataList && dataList.slot_list)
			setRowData([
				{ title: '1번 슬롯', itemNo: dataList.slot_list.slot1?.tool_id, itemName: dataList?.slot_list.slot1?.tool_name },
				{ title: '2번 슬롯', itemNo: dataList.slot_list.slot2?.tool_id, itemName: dataList?.slot_list.slot2?.tool_name },
				{ title: '3번 슬롯', itemNo: dataList.slot_list.slot3?.tool_id, itemName: dataList?.slot_list.slot3?.tool_name },
				{ title: '4번 슬롯', itemNo: dataList.slot_list.slot4?.tool_id, itemName: dataList?.slot_list.slot4?.tool_name },
			])
	}, [dataList])

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

	return (
		loading ? <TableSkeleton width='30%' count={4} /> :
		<>
			<ToolWrapper>
				<UserInfoTable $maxwidth="570px">
					<colgroup>
						<col width="120" />
						<col width="30%" />
						<col width="70%" />
					</colgroup>
					<tbody>
						{rowData && rowData.map((el, idx) => {
							return (
								<tr key={idx}>
									<th>{el.title}</th>
									<td>{el.itemNo}</td>
									<td>{el.itemName}</td>
								</tr>
							);
						})}
					</tbody>
				</UserInfoTable>
			</ToolWrapper>
		</>
	);
};

export default UserToolInfo;

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

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