import { useState } from 'react';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';

const ItemsSearchBar = ({ handleSearch, setResultData }) => {
	const [searchData, setSearchData] = useState({
		searchType: 'GUID',
		data: '',
		status: 'ALL',
		restore: 'ALL',
		sendDate: '',
		endDate: '',
	});

	const searchType = [
		{ value: 'GUID', name: 'GUID' },
		{ value: 'NAME', name: '닉네임' }
	];

	const status = [
		{ value: 'ALL', name: '상태' },
		{ value: 'ACTIVE', name: '활성' },
		{ value: 'DEACTIVE', name: '비활성' },
	];

	const restore = [
		{ value: 'ALL', name: '복구' },
		{ value: 'POSSIBLE', name: '가능' },
		{ value: 'IMPOSSIBLE', name: '불가능' },
	];

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

		handleSearch(
			searchData.searchType ? searchData.searchType : 'GUID',
			searchData.data,
			searchData.status ? searchData.status : 'ALL',
			searchData.restore ? searchData.restore : 'ALL',
			searchData.sendDate ? searchData.sendDate : '',
			searchData.endDate ? searchData.endDate : new Date(),
		);

		setResultData(searchData);
	};

	// 초기화 버튼
	const handleReset = () => {
		setSearchData({
			searchType: 'GUID',
			data: '',
			status: 'ALL',
			restore: 'ALL',
			sendDate: '',
			endDate: '',
		});
		handleSearch('GUID', '', 'ALL', 'ALL', '', '');
		setResultData('GUID', '', 'ALL', 'ALL', '', '');
		window.location.reload();
	};

	// console.log(searchData);

	const searchList = [
		<>
			<InputGroup>
				<SelectInput value={searchData.searchType} onChange={e => setSearchData({ ...searchData, searchType: e.target.value })}>
					{searchType.map((data, index) => (
						<option key={index} value={data.value}>
							{data.name}
						</option>
					))}
				</SelectInput>
				<TextInput
					type="text"
					placeholder={searchData.searchType === 'GUID' ? 'GUID 입력' : '닉네임 입력'}
					value={searchData.data}
					width="600px"
					onChange={e => setSearchData({ ...searchData, data: e.target.value })}
				/>
			</InputGroup>
		</>
	];

	const optionList = [
		<>
			<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
				{status.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<SelectInput value={searchData.restore} onChange={e => setSearchData({ ...searchData, restore: e.target.value })}>
				{restore.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>생성 날짜</InputLabel>
			<SearchPeriod
				startDate={searchData.sendDate}
				handleStartDate={data => {
					setSearchData({ ...searchData, sendDate: data });
				}}
				endDate={searchData.endDate}
				handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
				maxDate={new Date()}
			/>
		</>,
		<>
			<BtnWrapper $gap="8px">
				<Button theme="reset" handleClick={handleReset} />
				<Button theme="search" text="검색" type="submit" handleClick={handleSubmit} />
			</BtnWrapper>
		</>,
	];
	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
};

export default ItemsSearchBar;
