import styled from 'styled-components';
import Button from '../common/button/Button';
import { InfoSubTitle, UserDefaultTable, UserInfoTable, UserTableWrapper } from '../../styles/ModuleComponents';
import { useTranslation } from 'react-i18next';
import { useRecoilValue } from 'recoil';
import { authList } from '../../store/authList';
import { useEffect, useState } from 'react';
import { TableSkeleton } from '../Skeleton/TableSkeleton';
import { UserInventoryView, UserMyhomeView } from '../../apis';

const UserMyHomeInfo = ({ userInfo }) => {
	const { t } = useTranslation();

	const [dataList, setDataList] = useState();
	const [loading, setLoading] = useState(true);

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

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

	return (
		loading ? <TableSkeleton count={15}/> :
			dataList &&
			<>
				<UserInfoTable $maxwidth="700px">
					<tbody>
					<tr>
						<th>마이 홈명</th>
						<td>{dataList.myhome_name}</td>
					</tr>
					</tbody>
				</UserInfoTable>
				<InfoSubTitle top='30px'>배치 소품</InfoSubTitle>
				<UserTableWrapper>
					<UserDefaultTable>
						<thead>
						<tr>
							<th width="80">no.</th>
							<th width="120">아이템ID</th>
							<th width="50%">아이템명</th>
						</tr>
						</thead>
						<tbody>
						{dataList.prop_list && dataList.prop_list.map((el, idx) => {
							return (
								<tr key={idx}>
									<td>{idx + 1}</td>
									<td>{el.item_id}</td>
									<td>{el.item_name}</td>
								</tr>
							);
						})}
						</tbody>
					</UserDefaultTable>
				</UserTableWrapper>
			</>
	);
};

export default UserMyHomeInfo;


