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

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

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

		handleSearch(
			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({
			content: '',
			status: 'ALL',
			startDate: '',
			endDate: '',
			order: 'DESC',
		});

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

		window.location.reload();
	};

	const searchList = [
		<>
			<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 })}
			/>
		</>,
		<>
			<InputLabel>요청 상태</InputLabel>
			<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
				{caliumStatus.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<BtnWrapper $gap="8px">
				<Button theme="reset" handleClick={handleReset} type="button" />
				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
			</BtnWrapper>
		</>,
	];

	return <SearchBarLayout firstColumnData={searchList} direction={'column'} />;
};

export default CaliumRequestSearchBar;