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

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

import UserSearchBar from '../../components/DataManage/UserSearchBar';
import Modal from '../../components/common/modal/Modal';
import Button from '../../components/common/button/Button';

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

const CryptView = () => {
	const navigate = useNavigate();
	const userInfo = useRecoilValue(authList);
	const mokupData = [
		{
			getDate: '2023-08-06 18:50:03',
			getLocation: '유저 거래',
			itemName: '빛나는 가죽 장갑',
			serialNo: 'Serial_number',
			itemCode: 'Item_code',
			tradeKey: 'User_trade_key',
		},
	];

	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 15) ? (
				<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>
					<UserSearchBar />
					<TableWrapper>
						<TableStyle>
							<thead>
								<tr>
									<th width="170">획득일자</th>
									<th width="170">획득처</th>
									<th width="200">아이템명</th>
									<th width="250">시리얼 넘버</th>
									<th width="250">고유 코드</th>
									<th width="250">거래 key</th>
								</tr>
							</thead>
							<tbody>
								{mokupData.map((data, index) => (
									<Fragment key={index}>
										<tr>
											<td>{new Date(data.getDate).toLocaleString()}</td>
											<td>{data.getLocation}</td>
											<td>{data.itemName}</td>
											<td>{data.serialNo}</td>
											<td>{data.itemCode}</td>
											<td>{data.tradeKey}</td>
										</tr>
									</Fragment>
								))}
							</tbody>
						</TableStyle>
					</TableWrapper>
				</>
			)}
		</>
	);
};

export default CryptView;

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