import { useState, Fragment } from 'react';
import Button from '../../components/common/button/Button';
import RadioInput from '../../components/common/input/Radio';
import CheckBox from '../../components/common/input/CheckBox';
import Loading from '../../components/common/Loading';

import styled from 'styled-components';
import { Title, BtnWrapper, TextInput, SelectInput, Label, InputLabel, DatePickerWrapper, Textarea, ModalText, ButtonClose, SearchBarAlert, AlertText } from '../../styles/Components';

import IconDelete from '../../assets/img/icon/icon-delete.png';
import CloseIcon from '../../assets/img/icon/icon-close.png';

import { HourList, MinuteList, modalTypes, wellType } from '../../assets/data';

import { useNavigate } from 'react-router-dom';
import MailRegistUploadBtn from '../../components/ServiceManage/MailRegistUploadBtn';
import DatePickerComponent from '../../components/common/Date/DatePickerComponent';
import Modal from '../../components/common/modal/Modal';
import { MailCaliumTotalView, MailIsItem, MailMultiRegsit, MailSingleRegist } from '../../apis';

import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';
import { useTranslation } from 'react-i18next';
import { MailReceiver, RegistInputRow } from '../../styles/ModuleComponents';
import AuthModal from '../../components/common/modal/AuthModal';
import { authType } from '../../assets/data';
import { useDataFetch } from '../../utils/hook';
import { BattleConfigView } from '../../apis/Battle';
import { currencyCodeTypes } from '../../assets/data/types';
import { DynamicModal } from '../../components/common';

const MailRegist = () => {
	const navigate = useNavigate();
	const userInfo = useRecoilValue(authList);
	const { t } = useTranslation();
	const environment = process.env.REACT_APP_ENV;
	const token = sessionStorage.getItem('token');

	const [doubleSubmitFlag, setDoubleSubmitFlag] = useState(false);

	const [sendHour, setSendHour] = useState('00');
	const [sendMin, setSendMin] = useState('00');

	const [item, setItem] = useState('');
	const [itemCount, setItemCount] = useState('');
	const [resource, setResource] = useState('19010001');
	const [resourceCount, setResourceCount] = useState(0);

	const [cancelModalClose, setCancelModalClose] = useState('hidden');
	const [submitModal, setSubmitModal] = useState('hidden');
	const [completeModal, setCompleteModal] = useState('hidden');
	const [isNullValue, setIsNullValue] = useState(false);
	const [btnValidation, setBtnValidation] = useState(false);

	const [excelFile, setExcelFile] = useState(null);
	const [excelName, setExcelName] = useState(null);

	const [isItemNullValue, setIsItemNullValue] = useState(false);
	const [isResourceNullValue, setIsResourceNullValue] = useState(false);
	const [confirmText, setConfirmText] = useState('');
	const [alertMessage, setAlertMessage] = useState('');
	const [loading, setLoading] = useState(false);
	const [alertMsg, setAlertMsg] = useState('');

	const {
		data: caliumTotalData
	} = useDataFetch(() => MailCaliumTotalView(token), [token]);

	const [resultData, setResultData] = useState({
		is_reserve: false,
		send_dt: '',
		mail_type: 'SELECT',
		receive_type: 'SINGLE',
		user_type: 'GUID',
		mail_list: [
			{
				title: '',
				content: '',
				language: 'KO',
			},
			{
				title: '',
				content: '',
				language: 'EN',
			},
			{
				title: '',
				content: '',
				language: 'JA',
			}
		],
		item_list: [],
		resource_list: [],
		guid: '',
	});

	const benItems = [
		"19010003"
	];

	// 아이템 수량 숫자 체크
	const handleItemCount = e => {
		if (e.target.value === '0' || e.target.value === '-0') {
			setItemCount('1');
			e.target.value = '1';
		} else if (e.target.value < 0) {
			let plusNum = Math.abs(e.target.value);
			setItemCount(plusNum);
		} else {
			setItemCount(e.target.value);
		}
	};

	// 아이템 추가
	const handleItemList = async () => {
		if(benItems.includes(item) && environment === "live"){
			alert(t('MAIL_ITEM_ADD_BEN'))
			return;
		}
		item.length === 0 || itemCount.length === 0 ? setIsItemNullValue(true) : setIsItemNullValue(false);

		// const token = sessionStorage.getItem('token');
		const result = await MailIsItem(token, {item: item});

		if(result.data.result === "ERROR"){
			alert(result.data.data.message);
			return;
		}

		if (item.length === '' || itemCount.length === 0 || itemCount <= 0) {
			setIsItemNullValue(true);
		} else if (item.length !== 0) {
			setIsItemNullValue(false);
			const itemIndex = resultData.item_list.findIndex(
				(item) => item.item === resource
			);

			if (itemIndex !== -1) {
				alert(t('MAIL_ITEM_ADD_DUPL'));
				return;
			}
			const newItem = { item: item, item_cnt: itemCount, item_name: result.data.data.item_info.item_name };

			resultData.item_list.push(newItem);
			setItem('');
			setItemCount('');
		}
	};

	const onItemRemove = id => {
		let filterList = resultData.item_list && resultData.item_list.filter(item => item !== resultData.item_list[id]);
		setResultData({ ...resultData, item_list: filterList });
	};

	// 입력창 삭제
	const onLangDelete = language => {
		let filterList = resultData.mail_list && resultData.mail_list.filter(el => el.language !== language);

		if (filterList.length === 1) {
			setBtnValidation(true);
		} else {
			setBtnValidation(false);
		}

		setResultData({ ...resultData, mail_list: filterList });
	};

	// 자원 수량 숫자 체크
	const handleResourceCount = e => {
		if (e.target.value === '0' || e.target.value === '-0') {
			setResourceCount('1');
			e.target.value = '1';
		} else if (e.target.value < 0) {
			let plusNum = Math.abs(e.target.value);
			setResourceCount(plusNum);
		} else {
			setResourceCount(e.target.value);
		}
	};

	// 자원 추가
	const handleResourceList = () => {
		resourceCount.length === 0 ? setIsItemNullValue(true) : setIsItemNullValue(false);

		if (resourceCount.length === 0 || resourceCount <= 0) {
			setIsItemNullValue(true);
		} else {
			setIsItemNullValue(false);

			const itemIndex = resultData.item_list.findIndex(
				(item) => item.item === resource
			);

			if (itemIndex !== -1) {
				const item_cnt = resultData.item_list[itemIndex].item_cnt;
				if(resource === currencyCodeTypes.calium){
					if((Number(resourceCount) + Number(item_cnt)) > caliumTotalData){
						setAlertMsg(t('MAIL_ITEM_CALIUM_TOTAL_OVER_WARNING'))
						return;
					}
				}
				resultData.item_list[itemIndex].item_cnt = Number(item_cnt) + Number(resourceCount);
			} else {
				if(resource === currencyCodeTypes.calium){
					if(Number(resourceCount) > caliumTotalData){
						setAlertMsg(t('MAIL_ITEM_CALIUM_TOTAL_OVER_WARNING'))
						return;
					}
				}
				const name = wellType.find(well => well.value === resource).name;
				const newItem = { item: resource, item_cnt: resourceCount, item_name: name };
				resultData.item_list.push(newItem);
			}
			
			setResourceCount('');
		}
	};

	const onResourceRemove = id => {
		let filterList = resultData.resource_list && resultData.resource_list.filter(item => item !== resultData.resource_list[id]);
		setResultData({ ...resultData, resource_list: filterList });
	};

	// 발송 날짜 세팅 로직
	const handleSelectedDate = data => {
		const sendDate = new Date(data);

		const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate(), sendHour, sendMin);

		setResultData({ ...resultData, send_dt: resultSendData });
	};

	// 발송 시간 세팅 로직
	const handleSendTime = e => {
		let sendDate = '';

		if (resultData.send_dt.length === 0 || typeof resultData.send_dt.length != 'undefined') {
			sendDate = new Date();
		} else {
			sendDate = new Date(resultData.send_dt);
		}

		if (e.target.id === 'hour') setSendHour(e.target.value);
		else if (e.target.id === 'min') setSendMin(e.target.value);

		const result = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate(), e.target.id === 'hour' ? e.target.value : sendHour, e.target.id === 'min' ? e.target.value : sendMin);

		setResultData({ ...resultData, send_dt: result });
	};

	const handleSubmitModal = () => {
		if (
			resultData.mail_list.map(data => data.content === '' || data.title === '').includes(true) ||
			(resultData.receive_type === 'MULTIPLE' ? excelFile === null : resultData.guid === '') ||
			(resultData.is_reserve && resultData.send_dt.length === 0) ||
			resultData.mail_type === 'SELECT' ||
			alertMessage
		) {
			setIsNullValue(true);
		} else if (submitModal === 'hidden') {
			setIsNullValue(false);
			setSubmitModal('view');
		} else {
			setSubmitModal('hidden');
		}
	};

	// 취소 모달
	const handleCancelModalClose = () => {
		if (cancelModalClose === 'hidden') {
			setCancelModalClose('view');
		} else {
			setCancelModalClose('hidden');
			setConfirmText(t('MAIL_CANCEL'));
		}
	};

	// 완료 모달창
	const handleCompleteModal = () => {
		if (completeModal === 'hidden') {
			setCompleteModal('view');
		} else {
			setCompleteModal('hidden');

			navigate('/servicemanage/mail');
		}
	};

	const handleRegistMail = async () => {
		setLoading(true);
		await MailSingleRegist(token, resultData).then(data => {
			setLoading(false);
			handleSubmitModal();
			if(data.result === "ERROR"){
				if(data.data.message === "ERROR_MAIL_ITEM_CALIUM_OVER"){
					setAlertMsg(t('MAIL_ITEM_CALIUM_TOTAL_OVER_WARNING'));
				}else if(data.data.message === "NOT_EXIT_EXCEL"){
					setAlertMsg(t('EXCEL_SELECT'));
				}else if(data.data.message === "GUID_CHECK"){
					setAlertMsg(t('WARNING_GUID_CHECK'));
				}else if(data.data.message === "NICKNAME_CHECK"){
					setAlertMsg(t('WARNING_NICKNAME_CHECK'));
				}else if(data.data.message === "EMAIL_CHECK"){
					setAlertMsg(t('WARNING_EMAIL_CHECK'));
				}else if(data.data.message === "USERTYPE_CHECK_EXCEL") {
					setAlertMsg(t('WARNING_TYPE_CHECK'));
				}else{
					setAlertMsg(data.data.message);
				}
			}else{
				setConfirmText('우편이 정상 등록되었습니다.');
				handleCompleteModal();
			}
		}).catch(error => {
			setAlertMsg(t('API_FAIL'));
		});
	};

	const handleSingleBtn = () => {
		setResultData({ ...resultData, guid: '' });
		delete resultData.file_name;

		document.querySelector('#fileinput').value = '';

		setExcelFile(null);
	};

	const handleMultiBtn = () => {
		delete resultData.guid;
	};
	// console.log('alertMessage', alertMessage);
	// console.log('resultData: ', resultData);

	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === authType.mailUpdate) ? (
				<AuthModal/>
			) : (
				<>
					<Title>우편 등록</Title>

					<RegistGroup>
						<RegistInputRow>
							<CheckBox
								label="예약 발송"
								id="reserve"
								checked={resultData.is_reserve}
								setData={e => setResultData({ ...resultData, is_reserve: e.target.checked, send_dt: new Date() })}
							/>
							<InputItem>
								{resultData.is_reserve && (
									<>
										<InputLabel>발송 시간</InputLabel>
										<InputGroup>
											<DatePickerWrapper>
												<DatePickerComponent name="시작 일자" selectedDate={resultData.send_dt} handleSelectedDate={data => handleSelectedDate(data)} pastDate={new Date()} />
											</DatePickerWrapper>
											<SelectInput onChange={e => handleSendTime(e)} id="hour">
												{HourList.map(hour => (
													<option value={hour} key={hour}>
														{hour}
													</option>
												))}
											</SelectInput>
											<SelectInput onChange={e => handleSendTime(e)} id="min">
												{MinuteList.map(min => (
													<option value={min} key={min}>
														{min}
													</option>
												))}
											</SelectInput>
										</InputGroup>
									</>
								)}
							</InputItem>
							<InputItem>
								<InputLabel>우편 타입</InputLabel>
								<SelectInput onChange={e => setResultData({ ...resultData, mail_type: e.target.value })} value={resultData.mail_type}>
									<option value="SELECT">타입 선택</option>
									<option value="SYSTEM_GUID">시스템 안내</option>
									<option value="INSPECTION_COMPENSATION">점검 보상</option>
									<option value="RECOVER_COMPENSATION">복구 보상</option>
									<option value="EVENT_COMPENSATION">이벤트 보상</option>
								</SelectInput>
							</InputItem>
						</RegistInputRow>
						<MailNotice>* 예약 발송 미선택 시 등록과 함께 우편이 즉시 발송됩니다.</MailNotice>
						<MailReceiver>
							<InputItem>
								<InputLabel>수신대상</InputLabel>
								<InputItem>
									<SelectInput onChange={e => setResultData({ ...resultData, user_type: e.target.value })} value={resultData.user_type} disabled={resultData.receive_type !== 'SINGLE'}>
										<option value="GUID">GUID</option>
										<option value="NICKNAME">아바타명</option>
										<option value="EMAIL">이메일</option>
									</SelectInput>
								</InputItem>
								<div>
									<InputGroup>
										<RadioInput
											label="단일"
											id="SINGLE"
											name="receiver"
											value="SINGLE"
											fontWeight="600"
											checked={resultData.receive_type === 'SINGLE'}
											handleChange={e => setResultData({ ...resultData, receive_type: e.target.id })}
											handleClick={handleSingleBtn}
										/>
										<TextInput
											placeholder={resultData.user_type === "GUID" ? "GUID 입력" : resultData.user_type === "NICKNAME" ? "아바타명 입력" : "이메일 입력"}
											disabled={resultData.receive_type !== 'SINGLE'}
											onChange={e => setResultData({ ...resultData, guid: e.target.value })}
											value={resultData.receive_type === 'SINGLE' && resultData.guid ? resultData.guid : ''}
										/>
									</InputGroup>
									<InputGroup>
										<RadioInput
											label="복수"
											id="MULTIPLE"
											name="receiver"
											value="MULTIPLE"
											fontWeight="600"
											checked={resultData.receive_type === 'MULTIPLE'}
											handleChange={e => setResultData({ ...resultData, receive_type: e.target.id })}
											handleClick={handleMultiBtn}
										/>
										<MailRegistUploadBtn
											disabled={resultData.receive_type !== 'MULTIPLE'}
											setResultData={setResultData}
											resultData={resultData}
											excelFile={excelFile}
											alertMessage={alertMessage}
											setAlertMessage={setAlertMessage}
											setExcelFile={setExcelFile}
											excelName={excelName}
											setExcelName={setExcelName}
										/>
									</InputGroup>
								</div>
							</InputItem>
						</MailReceiver>
					</RegistGroup>
					{resultData.mail_list.map((data, idx) => {
						return (
							<Fragment key={idx}>
								<MailRegistBox>
									<LangArea>
										언어 : {data.language}
										{btnValidation === false ? (
											<BtnClose
												onClick={e => {
													e.preventDefault();
													onLangDelete(data.language);
												}}
											/>
										) : (
											<BtnClose opacity="10%" />
										)}
									</LangArea>
									<MailRegistTable>
										<tbody>
											<tr>
												<th width="120">
													<Label>제목</Label>
												</th>
												<td>
													<InputItem>
														<TextInput
															placeholder="우편 제목 입력"
															maxLength="30"
															id={data.language}
															value={data.title}
															onChange={e => {
																if (e.target.value.length > 30) {
																	return;
																}
																let list = [...resultData.mail_list];
																let findIndex = resultData.mail_list && resultData.mail_list.findIndex(item => item.language === e.target.id);
																list[findIndex].title = e.target.value.trimStart();

																setResultData({ ...resultData, mail_list: list });
															}}
														/>
													</InputItem>
													<MailNotice $color={data.title.length > 29 ? 'red' : '#666'}>* 최대 등록 가능 글자수 ({data.title.length}/30자)</MailNotice>
												</td>
											</tr>
											<tr>
												<th>
													<Label>내용</Label>
												</th>
												<td>
													<Textarea
														maxLength="2000"
														value={data.content}
														id={data.language}
														onChange={e => {
															if (e.target.value.length > 2000) {
																return;
															}
															let list = [...resultData.mail_list];
															let findIndex = resultData.mail_list && resultData.mail_list.findIndex(item => item.language === e.target.id);
															list[findIndex].content = e.target.value.trimStart();

															setResultData({ ...resultData, mail_list: list });
														}}
													/>
													<MailNotice $color={data.content.length > 1999 ? 'red' : '#666'}>* 최대 등록 가능 글자수 ({data.content.length}/2000자)</MailNotice>
												</td>
											</tr>
										</tbody>
									</MailRegistTable>
								</MailRegistBox>
							</Fragment>
						);
					})}

					<MailRegistBox>
						<MailRegistTable>
							<tbody>
								<tr>
									<th width="120">
										<Label>아이템 첨부</Label>
									</th>
									<td>
										<InputItem>
											<TextInput placeholder="Item Meta id 입력" value={item} onChange={e => setItem(e.target.value.trimStart())} />
											<TextInput placeholder="수량" type="number" value={itemCount} onChange={e => handleItemCount(e)} width="100px" />
											<Button text="추가" theme={itemCount.length === 0 || item.length === 0 ? 'disable' : 'search'} handleClick={handleItemList} width="100px" height="35px" />
										</InputItem>
										{/* {isItemNullValue && <SearchBarAlert $marginTop="15px">필수값을 입력해주세요.</SearchBarAlert>}

										<div>
											{resultData.item_list && (
												<ItemList>
													{resultData.item_list.map((data, index) => {
														return (
															<Item key={index}>
																<span>
																	{data.item}({data.item_cnt})
																</span>
																<BtnDelete onClick={() => onItemRemove(index)}></BtnDelete>
															</Item>
														);
													})}
												</ItemList>
											)}
										</div> */}
									</td>
								</tr>
								<tr>
									<th width="120">
										<Label>자원 첨부</Label>
									</th>
									<td>
										<InputItem>
											<SelectInput onChange={e => setResource(e.target.value)} value={resource}>
												<option value="19010001">골드</option>
												<option value="19010002">사파이어</option>
												<option value="19010005">루비</option>
												<option value="19010003">칼리움</option>
											</SelectInput>
											<TextInput placeholder="수량" type="number" value={resourceCount} onChange={e => handleResourceCount(e)} width="200px" />
											<Button text="추가" theme={resourceCount.length === 0 || resource.length === 0 ? 'disable' : 'search'} handleClick={handleResourceList} width="100px" height="35px" />
											{resource === currencyCodeTypes.calium && <Label>(잔여 수량: {caliumTotalData})</Label>}
										</InputItem>
										{isItemNullValue && <SearchBarAlert $marginTop="15px">필수값을 입력해주세요.</SearchBarAlert>}

										<div>
											{resultData.item_list && (
												<ItemList>
													{resultData.item_list.map((data, index) => {
														return (
															<Item key={index}>
																<span>
																	{data.item_name}[{data.item}] ({data.item_cnt})
																</span>
																<BtnDelete onClick={() => onItemRemove(index)}></BtnDelete>
															</Item>
														);
													})}
												</ItemList>
											)}
										</div>
									</td>
								</tr>
							</tbody>
						</MailRegistTable>
					</MailRegistBox>
					{isNullValue && (
						<SearchBarAlert $align="right" $padding="0 0 15px">
							필수값을 입력해주세요.
						</SearchBarAlert>
					)}

					<BtnWrapper $justify="flex-end" $gap="10px">
						<Button text="취소" theme="line" handleClick={handleCancelModalClose} />
						<Button
							type="submit"
							text="등록"
							theme={
								resultData.mail_list.map(data => data.content === '' || data.title === '').includes(true) ||
								(resultData.receive_type === 'MULTIPLE' ? excelFile === null : resultData.guid === '') ||
								(resultData.is_reserve && resultData.send_dt.length === 0) ||
								resultData.mail_type === 'SELECT' ||
								alertMessage
									? 'disable'
									: 'primary'
							}
							handleClick={handleSubmitModal}
						/>
					</BtnWrapper>
					{/* 등록 모달 */}
					<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={submitModal}>
						<BtnWrapper $justify="flex-end">
							<ButtonClose onClick={handleSubmitModal} />
						</BtnWrapper>
						<ModalText $align="center">우편을 등록하시겠습니까?</ModalText>
						<BtnWrapper $gap="10px">
							<Button text="취소" theme="line" size="large" width="100%" handleClick={handleSubmitModal} />
							<Button
								text="확인"
								theme="primary"
								type="submit"
								size="large"
								width="100%"
								handleClick={() => {handleRegistMail();}}
							/>
						</BtnWrapper>
					</Modal>
					{/* 완료 모달 */}
					<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={completeModal}>
						<BtnWrapper $justify="flex-end">
							<ButtonClose onClick={handleCompleteModal} />
						</BtnWrapper>
						<ModalText $align="center">{confirmText}</ModalText>
						<BtnWrapper $gap="10px">
							<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={handleCompleteModal} />
						</BtnWrapper>
					</Modal>
					{/* 취소 모달 */}
					<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={cancelModalClose}>
						<BtnWrapper $justify="flex-end">
							<ButtonClose onClick={handleCancelModalClose} />
						</BtnWrapper>
						<ModalText $align="center">
							우편 등록을 취소하시겠습니까?
							<br />
							취소 시 설정된 값은 반영되지 않습니다.
						</ModalText>
						<BtnWrapper $gap="10px">
							<Button text="취소" theme="line" size="large" width="100%" handleClick={handleCancelModalClose} />
							<Button
								text="확인"
								theme="primary"
								type="submit"
								size="large"
								width="100%"
								handleClick={() => {
									handleCancelModalClose();
									handleCompleteModal();
								}}
							/>
						</BtnWrapper>
					</Modal>
					{/* 경고 모달 */}
					<DynamicModal
						modalType={modalTypes.completed}
						view={alertMsg ? 'view' : 'hidden'}
						modalText={alertMsg}
						handleSubmit={() => setAlertMsg('')}
					/>
					{loading && <Loading/>}
				</>
			)}
		</>
	);
};

export default MailRegist;

const InputRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 10px 50px;
`;

const InputItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	${TextInput},${SelectInput} {
		height: 35px;
		font-size: 14px;
	}
	${TextInput} {
		padding: 0 20px;
	}
	${SelectInput} {
		width: max-content;
	}
`;

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

const MailNotice = styled.span`
	font-size: 12px;
	font-weight: 300;
	color: ${props => props.$color || '#999'};
	margin-top: 10px;
	display: block;
`;
const RegistGroup = styled.div`
	display: flex;
	width: 100%;
	flex-flow: column;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;

	${MailNotice} {
		margin-bottom: 20px;
	}
`;

const BtnClose = styled.button`
	width: 16px;
	height: 16px;
	background: url(${CloseIcon}) 50% 50% no-repeat;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 20px;
	opacity: ${props => props.opacity};
`;

const LangArea = styled.div`
	background: #f9f9f9;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	position: relative;
`;

const MailRegistBox = styled.div`
	margin-bottom: 20px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
`;

const MailRegistTable = styled.table`
	th {
		vertical-align: top;
		line-height: 35px;
	}
	th,
	td {
		padding: 15px 0;
		border-bottom: 1px solid #f6f6f6;
	}
	td {
		${InputItem} {
			gap: 5px;
		}
		${TextInput} {
			max-width: 600px;
			padding: 0 15px;
		}
		${Textarea} {
			width: 100%;
			border: 1px solid #d9d9d9;
			border-radius: 5px;
			height: 255px;
			padding: 15px;
			&:focus {
				border: 1px solid #2c2c2c;
			}
		}
	}
`;

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

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

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