import styled from 'styled-components';
import { TextInput, BtnWrapper, InputLabel, SelectInput } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { useState } from 'react';
import { mailReceiveType, mailSendStatus, mailSendType, mailType } from '../../../assets/data';

const MailListSearchBar = ({ handleSearch, setResultData }) => {
	const [searchData, setSearchData] = useState({
		mailTitle: '',
		content: '',
		sendType: 'ALL',
		sendStatus: 'ALL',
		mailType: 'ALL',
		receiveType: 'ALL',
		sendDate: '',
		endDate: '',
	});

	const handleSubmit = event => {
		event.preventDefault();

		handleSearch(
			searchData.mailTitle,
			searchData.content,
			searchData.sendType ? searchData.sendType : 'ALL',
			searchData.sendStatus ? searchData.sendStatus : 'ALL',
			searchData.mailType ? searchData.mailType : 'ALL',
			searchData.receiveType ? searchData.receiveType : 'ALL',
			searchData.sendDate ? searchData.sendDate : '',
			searchData.endDate ? searchData.endDate : new Date(),
			(searchData.sendDate && searchData.endDate === '') && setSearchData({ sendDate : searchData.sendDate ,endDate : new Date()}),
		);

		setResultData(searchData);
	};

	const handleReset = () => {
		setSearchData({
			mailTitle: '',
			content: '',
			sendType: 'ALL',
			sendStatus: 'ALL',
			mailType: 'ALL',
			receiveType: 'ALL',
			sendDate: '',
			endDate: '',
			order: 'DESC',
		});

		handleSearch('', '', 'ALL', 'ALL', 'ALL', 'ALL', '', '');
		setResultData('', '', 'ALL', 'ALL', 'ALL', 'ALL', '', '');

		window.location.reload();
	};

	// console.log("searchData.endDate", searchData.endDate)

	const searchList = [
		<>
			<InputLabel>우편 제목</InputLabel>
			<TextInput 
				type="text" 
				placeholder="우편 제목" 
				value={searchData.mailTitle} 
				onChange={e => setSearchData({ ...searchData, mailTitle: e.target.value })} 
			/>
		</>,
		<>
			<InputLabel>조회 일자</InputLabel>
			<SearchPeriod
				startDate={searchData.sendDate}
				handleStartDate={data => {
					setSearchData({ ...searchData, sendDate: data });
				}}
				endDate={searchData.endDate}
				handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
				maxDate={new Date()}
			/>
		</>,
		<>
		<InputLabel>우편 내용</InputLabel>
		<TextInput 
			type="text" 
			placeholder="우편 내용(공백으로 구분)" 
			value={searchData.content} 
			onChange={e => setSearchData({ ...searchData, content: e.target.value })} 
		/>
	</>
	];

	const optionList = [
		<>
			<InputLabel>발송 방식</InputLabel>
			<SelectInput value={searchData.sendType} onChange={e => setSearchData({ ...searchData, sendType: e.target.value })}>
				{mailSendType.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>발송 상태</InputLabel>
			<SelectInput value={searchData.sendStatus} onChange={e => setSearchData({ ...searchData, sendStatus: e.target.value })}>
				{mailSendStatus.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>우편 타입</InputLabel>
			<SelectInput value={searchData.mailType} onChange={e => setSearchData({ ...searchData, mailType: e.target.value })}>
				{mailType.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>수신 대상</InputLabel>
			<SelectInput value={searchData.receiveType} onChange={e => setSearchData({ ...searchData, receiveType: e.target.value })}>
				{mailReceiveType.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
	];
	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} onReset={handleReset} handleSubmit={handleSubmit} />;
};

export default MailListSearchBar;