import { styled } from 'styled-components';
import { Link } from 'react-router-dom';
import { Fragment, useState } from 'react';

import { Title, TableStyle, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';

import LandSearchBar from '../../components/DataManage/LandSearchBar';
import Button from '../../components/common/button/Button';
import QuestDetailModal from '../../components/DataManage/QuestDetailModal';
import LandDetailModal from '../../components/DataManage/LandDetailModal';
import Modal from '../../components/common/modal/Modal';

import { useNavigate } from 'react-router-dom';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';

const ContentsView = () => {
	const navigate = useNavigate();
	const userInfo = useRecoilValue(authList);

	const [detailPop, setDetailPop] = useState('hidden');
	const mokupData = [
		{
			landId: '2000515223',
			ownerNick: '칼리버스F',
			ownerId: '23d59e868ca342198f6a653d957914a5',
			lockInDate: '2023-08-11 15:32:07',
			landUrl: '0x5765eB84ab55369f430DdA0d0C2b443FB9372DB3',
		},
	];

	const handleClick = () => {
		if (detailPop === 'hidden') setDetailPop('view');
		else setDetailPop('hidden');
	};
	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 13) ? (
				<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={'view'}>
					<BtnWrapper $justify="flex-end">
						<ButtonClose onClick={() => navigate(-1)} />
					</BtnWrapper>
					<ModalText $align="center">
						해당 메뉴에 대한 조회 권한이 없습니다.
						<br />
						권한 등급을 변경 후 다시 이용해주세요.
					</ModalText>
					<BtnWrapper $gap="10px">
						<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={() => navigate(-1)} />
					</BtnWrapper>
				</Modal>
			) : (
				<>
					<Title>랜드 정보 조회</Title>
					<LandSearchBar />
					<TableWrapper>
						<TableStyle>
							<thead>
								<tr>
									<th width="150">랜드 ID</th>
									<th>소유자 아바타명</th>
									<th>소유쟈 GUID</th>
									<th width="200">Lock IN 처리 일자</th>
									<th>랜드 URL</th>
									<th width="150">상세보기</th>
								</tr>
							</thead>
							<tbody>
								{mokupData.map((data, index) => (
									<Fragment key={index}>
										<tr>
											<td>{data.landId}</td>
											<td>{data.ownerNick}</td>
											<td>{data.ownerId}</td>
											<td>{new Date(data.lockInDate).toLocaleString()}</td>
											<td>
												<LandLink to={data.landUrl}>{data.landUrl}</LandLink>
											</td>
											<td>
												<Button theme="line" text="상세보기" handleClick={handleClick} />
											</td>
										</tr>
									</Fragment>
								))}
							</tbody>
						</TableStyle>
					</TableWrapper>
					<LandDetailModal detailPop={detailPop} handleClick={handleClick} />
				</>
			)}
		</>
	);
};

export default ContentsView;

const TableWrapper = styled.div`
	overflow: auto;
	border-top: 1px solid #000;
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
	thead {
		th {
			position: sticky;
			top: 0;
			z-index: 10;
		}
	}
	${TableStyle} {
		min-width: 1000px;
		th {
			position: sticky;
			top: 0;
		}
	}
`;

const LandLink = styled(Link)`
	color: #61a2d0;
	text-decoration: underline;
`;
