import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';
import Modal from '../common/modal/Modal';

import { TextInput, BtnWrapper} from '../../styles/Components';
import { Textarea, Title } from '../../styles/Components';
import CDivider from '../common/CDivider';
import { useTranslation } from 'react-i18next';
import IconDelete from '../../assets/img/icon/icon-delete.png';

const MailDetailModal = ({ mailModal, handleClick, setDetail, content, handleDelete, handleItemDelete, authDelete }) => {
	const { t } = useTranslation();
	return (
		<>
			<Modal $view={mailModal}>
				<Title $align="center">우편 상세 정보</Title>
				<MailDetailTable>
					<tbody>
						<tr>
							<th width="120">제목</th>
							<td>
								<TextInput defaultValue={content.title}></TextInput>
							</td>
						</tr>
						<tr>
							<th>내용</th>
							<td>
								<Textarea defaultValue={content.content}></Textarea>
							</td>
						</tr>
						<tr>
							<th>아이템 첨부</th>
							<td>
								<div>
									{content.item_list && (
										<ItemList>
											{content &&
												content.item_list.map((data, index) => {
													return (
														<Item key={index}>
															<span>
																{data.item_name}({data.count})
															</span>
															<BtnDelete onClick={() => handleItemDelete(data)} disabled={!authDelete}></BtnDelete>
															{content && content.is_reserve === false}
														</Item>
													);
												})}
										</ItemList>
									)}
								</div>
							</td>
						</tr>
					</tbody>
				</MailDetailTable>
				<BtnWrapper $justify="center">
					<Button
						theme={authDelete ? "line" : "disable"}
						text="삭제"
						handleClick={handleDelete}
						disabled={!authDelete}
					/>
					<CDivider />
					<Button
						theme="line"
						text="확인"
						handleClick={e => {
							e.preventDefault();
							handleClick();
							setDetail({ title: '', content: '', item_list: [] });
						}}
					/>
				</BtnWrapper>
			</Modal>
		</>
	);
};

export default MailDetailModal;

const MailDetailTable = styled.table`
	max-width: 800px;
	margin-bottom: 30px;
	tr:first-child {
		th,
		td {
			border-top: 1px solid #000;
		}
	}
	th {
		font-weight: 700;
		vertical-align: top;
		line-height: 30px;
	}
	th,
	td {
		padding: 15px;
		border-bottom: 1px solid #d9d9d9;
	}
	tr:last-child {
		th,
		td {
			border-bottom: 1px solid #000;
		}
	}
	td {
		textarea {
			border: 1px solid #e0e0e0;
			width: 100%;
			border-radius: 5px;
			min-height: 200px;
			&::-webkit-scrollbar {
				width: 4px;
			}
			&::-webkit-scrollbar-thumb {
				background: #666666;
			}
			&::-webkit-scrollbar-track {
				background: #d9d9d9;
			}
		}
	}
`;

const ItemList = styled.ul`
	display: flex;
	gap: 20px;
	padding: 10px;
	flex-wrap: wrap;
`;

const Item = styled.li`
	display: flex;
	align-items: center;
`;

const BtnDelete = styled.button`
	width: 12px;
	height: 12px;
	background: url(${IconDelete}) 50% 50% no-repeat;
`;
