import { useState } from 'react';
import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout } from '../../common/SearchBar';
import { blockPeriod, blockSanctions, blockSearchType, blockStatus } from '../../../assets/data';
import { userSearchType } from '../../../assets/data/options';

const UserBlockSearchBar = ({ handleSearch, setResultData }) => {
	const [searchData, setSearchData] = useState({
		searchType: 'GUID',
		data: '',
		email: '',
		status: 'ALL',
		sanctions: 'ALL',
		period: 'ALL',
	});

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

		handleSearch(
			searchData.searchType ? searchData.searchType : 'GUID',
			searchData.data,
			searchData.email,
			searchData.status ? searchData.status : 'ALL',
			searchData.sanctions ? searchData.sanctions : 'ALL',
			searchData.period ? searchData.period : 'ALL',
		);

		setResultData(searchData);
	};

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

	// console.log(searchData);

	const searchList = [
		<>
			<InputLabel>대상</InputLabel>
			<InputGroup>
				<SelectInput value={searchData.searchType} onChange={e => setSearchData({ ...searchData, searchType: e.target.value })}>
					{userSearchType.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>
		</>,
		<>
			<InputLabel>등록자</InputLabel>
			<TextInput type="text" placeholder="이메일 입력" width="600px" value={searchData.email} onChange={e => setSearchData({ ...searchData, email: e.target.value })} />
		</>,
	];

	const optionList = [
		<>
			<InputLabel>상태</InputLabel>
			<SelectInput value={searchData.status} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
				{blockStatus.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>제재 사유</InputLabel>
			<SelectInput value={searchData.sanctions} onChange={e => setSearchData({ ...searchData, sanctions: e.target.value })}>
				{blockSanctions.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>제재 기간</InputLabel>
			<SelectInput value={searchData.period} onChange={e => setSearchData({ ...searchData, period: e.target.value })}>
				{blockPeriod.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 UserBlockSearchBar;