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 { eventStatus } from '../../assets/data';

const EventListSearchBar = ({ handleSearch, setResultData }) => {
	const [searchData, setSearchData] = useState({
		title: '',
		content: '',
		status: 'ALL',
		startDate: '',
		endDate: '',
	});

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

		handleSearch(
			searchData.title,
			searchData.content,
			searchData.status ? searchData.status : 'ALL',
			searchData.startDate ? searchData.startDate : '',
			searchData.endDate ? searchData.endDate : new Date(),
			(searchData.startDate && searchData.endDate === '') && setSearchData({ startDate : searchData.startDate ,endDate : new Date()}),
		);

		setResultData(searchData);
	};

	const handleReset = () => {
		setSearchData({
			title: '',
			content: '',
			status: 'ALL',
			startDate: '',
			endDate: '',
			order: 'DESC',
		});

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

		window.location.reload();
	};

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

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

	const optionList = [
		<>
			<InputLabel>이벤트 상태</InputLabel>
			<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
				{eventStatus.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 EventListSearchBar;