operationSystem-front/src/components/ServiceManage/searchBar/BattleEventSearchBar.js

import { TextInput, BtnWrapper, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import Button from '../../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { BattleEventView } from '../../../apis/Battle';
import {
	battleEventHotTime,
	battleEventRoundCount,
	battleEventStatus,
	battleRepeatType,
	eventSearchType,
} from '../../../assets/data/options';

export const useBattleEventSearch = (token, initialPageSize) => {
	const [searchParams, setSearchParams] = useState({
		searchType: 'ID',
		searchData: '',
		configId: 'ALL',
		rewardId: 'ALL',
		repeatType: 'ALL',
		status: 'ALL',
		roundCount: 'ALL',
		hotTime: 'ALL',
		startDate: '',
		endDate: '',
		orderBy: 'DESC',
		pageSize: initialPageSize,
		currentPage: 1
	});

	const [loading, setLoading] = useState(false);
	const [data, setData] = useState(null);

	useEffect(() => {
		fetchData(searchParams); // 컴포넌트 마운트 시 초기 데이터 로드
	}, [token]);

	const fetchData = useCallback(async (params) => {
		try {
			setLoading(true);
			const result = await BattleEventView(
				token,
				params.searchType,
				params.searchData,
				params.configId,
				params.rewardId,
				params.repeatType,
				params.status,
				params.roundCount,
				params.hotTime,
				params.startDate && new Date(params.startDate).toISOString(),
				params.endDate && new Date(params.endDate).toISOString(),
				params.orderBy,
				params.pageSize,
				params.currentPage
			);
			setData(result);
			return result;
		} catch (error) {
			console.error('Error fetching auction data:', error);
			throw error;
		} finally {
			setLoading(false);
		}
	}, [token]);

	const updateSearchParams = useCallback((newParams) => {
		setSearchParams(prev => ({
			...prev,
			...newParams
		}));
	}, []);

	const handleSearch = useCallback(async (newParams = {}) => {
		const updatedParams = {
			...searchParams,
			...newParams,
			currentPage: newParams.currentPage || 1 // Reset to first page on new search
		};
		updateSearchParams(updatedParams);
		return await fetchData(updatedParams);
	}, [searchParams, fetchData]);

	const handleReset = useCallback(async () => {
		const resetParams = {
			searchType: 'ID',
			searchData: '',
			configId: 'ALL',
			rewardId: 'ALL',
			repeatType: 'ALL',
			status: 'ALL',
			roundCount: 'ALL',
			hotTime: 'ALL',
			startDate: '',
			endDate: '',
			orderBy: 'DESC',
			pageSize: initialPageSize,
			currentPage: 1
		};
		setSearchParams(resetParams);
		return await fetchData(resetParams);
	}, [initialPageSize, fetchData]);

	const handlePageChange = useCallback(async (newPage) => {
		return await handleSearch({ currentPage: newPage });
	}, [handleSearch]);

	const handlePageSizeChange = useCallback(async (newSize) => {
		return await handleSearch({ pageSize: newSize, currentPage: 1 });
	}, [handleSearch]);

	const handleOrderByChange = useCallback(async (newOrder) => {
		return await handleSearch({ orderBy: newOrder });
	}, [handleSearch]);

	return {
		searchParams,
		loading,
		data,
		handleSearch,
		handleReset,
		handlePageChange,
		handlePageSizeChange,
		handleOrderByChange,
		updateSearchParams
	};
};

const BattleEventSearchBar = ({ searchParams, onSearch, onReset, configData, rewardData }) => {
	const handleSubmit = event => {
		event.preventDefault();

		onSearch(searchParams);
	};

	const searchList = [
		<>
			<InputGroup>
				<SelectInput value={searchParams.searchType} onChange={e => onSearch({searchType: e.target.value })}>
					{eventSearchType.map((data, index) => (
						<option key={index} value={data.value}>
							{data.name}
						</option>
					))}
				</SelectInput>
				<TextInput
					type="text"
					placeholder={searchParams.searchType === 'ID' ? '이벤트 ID 입력' : '이벤트명 입력'}
					value={searchParams.searchData}
					width="300px"
					onChange={e => onSearch({ searchData: e.target.value })}
				/>
			</InputGroup>
		</>,
		<>
			<InputLabel>라운드 시간</InputLabel>
			<InputGroup>
				<SelectInput value={searchParams.configId} onChange={e => onSearch({ configId: e.target.value })}>
					<option value="ALL">전체</option>
					{configData?.map((data, index) => (
						<option key={index} value={data.id}>
							{data.desc}
						</option>
					))}
				</SelectInput>
			</InputGroup>
			<InputLabel>배정 포드</InputLabel>
			<InputGroup>
				<SelectInput value={searchParams.rewardId} onChange={e => onSearch({ rewardId: e.target.value })}>
					<option value='ALL'>전체</option>
					{rewardData?.map((data, index) => (
						<option key={index} value={data.id}>
							{data.desc}
						</option>
					))}
				</SelectInput>
			</InputGroup>
			<InputLabel>라운드 수</InputLabel>
			<InputGroup>
				<SelectInput value={searchParams.roundCount} onChange={e => onSearch({ roundCount: e.target.value })}>
					<option value='ALL'>전체</option>
					{battleEventRoundCount.map((data, index) => (
						<option key={index} value={data}>
							{data}
						</option>
					))}
				</SelectInput>
			</InputGroup>
		</>
	];

	const optionList = [
		<>
			<InputLabel>반복</InputLabel>
			<SelectInput value={searchParams.repeatType} onChange={e => onSearch({ repeatType: e.target.value }, false)} >
				{battleRepeatType.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>이벤트상태</InputLabel>
			<SelectInput value={searchParams.status} onChange={e => onSearch({ status: e.target.value }, false)}>
				{battleEventStatus.map((data, index) => (
					<option key={index} value={data.value}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>핫타임</InputLabel>
			<SelectInput value={searchParams.hotTime} onChange={e => onSearch({ hotTime: e.target.value }, false)}>
				<option value="ALL">전체</option>
				{battleEventHotTime.map((data, index) => (
					<option key={index} value={data}>
						{data}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>이벤트 기간</InputLabel>
			<SearchPeriod
				startDate={searchParams.startDate}
				handleStartDate={date => onSearch({ startDate: date }, false)}
				endDate={searchParams.endDate}
				handleEndDate={date => onSearch({ endDate: date }, false)}
			/>
		</>,
		<></>,<></>,
		<>
			<BtnWrapper $gap="8px">
				<Button theme="reset" handleClick={onReset} type="button" />
				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
			</BtnWrapper>
		</>,
	];
	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
};

export default BattleEventSearchBar;