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

import { Title, TableStyle, BtnWrapper, TextInput } from '../../../styles/Components';
import Modal from '../../common/modal/Modal';
import Button from '../../common/button/Button';
import { convertKTC } from '../../../utils';

const UserBlockDetailModal = ({ stateModal, handleModal, data }) => {
	const history = data.history;

	const type = [
		{ value: 'ACCESS_RESTRICTIONS', name: '접근 제한' },
		{ value: 'CHATTING_RESTRICTIONS', name: '채팅 제한' },
	];

	const sanctions = [
		{ value: 'BAD_BEHAVIOR', name: '비매너 행위' },
		{ value: 'INAPPROPRIATE_NAME', name: '불건전 이름 사용' },
		{ value: 'CASH_TRANSACTION', name: '현금거래 행위' },
		{ value: 'GAME_INTERFERENCE', name: '게임 진행 방해' },
		{ value: 'SERVICE_INTERFERENCE', name: '운영서비스 방해' },
		{ value: 'ACCOUNT_IMPERSONATION', name: '계정도용' },
		{ value: 'BUG_ABUSE', name: '버그/어뷰징' },
		{ value: 'ILLEGAL_PROGRAM', name: '불법프로그램 사용' },
		{ value: 'PERSONAL_INFO_LEAK', name: '개인정보 유출' },
		{ value: 'ADMIN_IMPERSONATION', name: '운영자 사칭' },
	];

	const period = [
		{ value: 'WARNING', name: '경고' },
		{ value: 'D1', name: '1일' },
		{ value: 'D3', name: '3일' },
		{ value: 'D7', name: '7일' },
		{ value: 'D15', name: '15일' },
		{ value: 'D30', name: '30일' },
		{ value: 'PERMANENT', name: '영구정지' },
	];

	return (
		<>
			<Modal min="960px" $view={stateModal}>
				<Title $align="center">이용자 제재 상세 정보</Title>
				<RegistInfo>
					<span>등록자 : {data.create_by}</span>
					<span>등록일 : {convertKTC(data.create_dt, false)}</span>
				</RegistInfo>
				<BlockDetailState>
					<table>
						<caption></caption>
						<tbody>
							<tr>
								<th width="100px">유저 GUID</th>
								<td>
									<TextInput value={data && data.guid || ''} disabled />
								</td>
								<th width="100px">아바타명</th>
								<td>
									<TextInput value={data && data.nickname || ''} disabled />
								</td>
							</tr>
							<tr>
								<th>제재 방식</th>
								<td>
									<TextInput value={type.map(item => item.value === data.type && item.name).filter(data => data !== false) || ''} disabled />
								</td>
								<th></th>
								<td></td>
							</tr>
							<tr>
								<th>제재 기간</th>
								<td colSpan="3">
									<InputWrapper>
										<TextInput value={period.map(item => item.value === data.period && item.name).filter(data => data !== false) || ''} disabled />
										<span>시작일 : {convertKTC(data.start_dt, false)}</span>
										<span>종료일 : {convertKTC(data.end_dt, false)}</span>
									</InputWrapper>
								</td>
							</tr>
							<tr>
								<th>제재 사유</th>
								<td>
									<TextInput value={sanctions.map(item => item.value === data.sanctions && item.name).filter(data => data !== false) || ''} disabled />
								</td>
							</tr>
						</tbody>
					</table>
				</BlockDetailState>

				<BlockCount>전체 제재 이력({history && history.length}건)</BlockCount>
				<BlockHistory>
					<TableStyle>
						<thead>
							<tr>
								<th>일자</th>
								<th width="10%">제재 기간</th>
								<th width="10%">제재 방식</th>
								<th width="20%">제재 사유</th>
								<th width="20%">등록자</th>
							</tr>
						</thead>
						<tbody>
							{history &&
								history.map((content, index) => (
									<Fragment key={index}>
										<tr>
											<td>
												{convertKTC(content.start_dt, false)} ~
												{convertKTC(content.end_dt, false)}
											</td>
											<td>{period.map(item => item.value === data.period && item.name)}</td>
											<td>{type.map(item => item.value === data.type && item.name)}</td>
											<td>{sanctions.map(item => item.value === data.sanctions && item.name)}</td>
											<td></td>
										</tr>
									</Fragment>
								))}
						</tbody>
					</TableStyle>
				</BlockHistory>
				<BlockNotice>※ 삭제된 제재 이력은 표시되지 않습니다.</BlockNotice>
				<BtnWrapper $justify="flex-end">
					<Button text="확인" theme="line" handleClick={handleModal} />
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default UserBlockDetailModal;

const BlockDetailState = styled.div`
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 15px 10px;
	font-size: 14px;
	margin-bottom: 20px;
	input {
		height: 35px;
		max-width: 330px;
		font-size: 14px;
		padding: 5px 10px;
	}
	table {
		tr {
			th,
			td {
				padding: 5px;
			}
		}
	}
`;

const RegistInfo = styled.div`
	display: flex;
	justify-content: flex-end;
	gap: 50px;
	font-size: 14px;
	margin-bottom: 10px;
`;

const BlockCount = styled.div`
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	padding-bottom: 5px;
`;

const BlockHistory = styled.div`
	max-height: 324px;
	position: relative;
	overflow: auto;
	border-top: 1px solid #000;
	${TableStyle} {
		border-collapse: separate;
		&:before {
			display: none;
		}
		th {
			position: sticky;
			top: 0;
		}
		tbody {
			tr:first-child {
				color: #d60000;
			}
			tr:last-child td {
				border-bottom: 1px solid #e8eaec;
			}
		}
	}
`;

const BlockNotice = styled.span`
	font-size: 12px;
	color: #686868;
	padding-left: 10px;
	font-weight: 300;
	line-height: 2;
`;

const InputWrapper = styled.div`
	display: flex;
	gap: 20px;
	align-items: center;
`;
