operationSystem-front/src/components/searchBar/RankInfoSearchBar.js

import { InputLabel, SelectInput, InputGroup } from '../../styles/Components';
import { SearchBarLayout } from '../common/SearchBar';
import { useCallback, useEffect, useState } from 'react';
import { RankingSnapshotView, RankerListView } from '../../apis';

export const useRankInfoSearch = (token) => {
	const [searchParams, setSearchParams] = useState({
		guid: '',
		snapshot: '',
		orderBy: 'DESC',
		currentPage: 1
	});

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


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

	const fetchSnapshotData = useCallback(async (guid) => {
		if (!guid) {
			setSnapshotData([]);
			return;
		}

		try {
			const result = await RankingSnapshotView(
				token,
				guid
			);
			setSnapshotData(result || []);
		} catch (error) {
			console.error('Error fetching snapshot data:', error);
			setSnapshotData([]);
		}
	}, [token]);

	useEffect(() => {
		if (searchParams.guid) {
			fetchSnapshotData(searchParams.guid);
		} else {
			setSnapshotData([]);
		}
	}, [searchParams.guid, fetchSnapshotData]);

	const fetchData = useCallback(async (params) => {
		try {
			if(params.snapshot === ''){
				setData();
				return;
			}

			setLoading(true);
			const result = await RankerListView(
				token,
				params.guid,
				params.snapshot,
			);
			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 = {
			guid: '',
			snapshot: '',
			orderBy: 'DESC',
			currentPage: 1
		};
		setSearchParams(resetParams);
		return await fetchData(resetParams);
	}, [fetchData]);

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

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

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

const RankInfoSearchBar = ({ searchParams, onSearch, onReset, scheduleData, snapshotData }) => {
	const handleSubmit = event => {
		event.preventDefault();

		onSearch(searchParams);
	};

	const searchList = [
		<>
			<InputLabel>랭킹스케줄</InputLabel>
			<InputGroup>
				<SelectInput value={searchParams.guid} onChange={e => onSearch({ guid: e.target.value, snapshot: '' }, false)}>
					<option value=""></option>
					{scheduleData?.map((data, index) => (
						<option key={index} value={data.guid}>
							{data.title}
						</option>
					))}
				</SelectInput>
			</InputGroup>
			<InputLabel>스냅샷</InputLabel>
			<InputGroup>
				<SelectInput value={searchParams.snapshot} onChange={e => onSearch({ snapshot: e.target.value }, false)}>
					<option value="">
						{!searchParams.guid ? '먼저 랭킹스케줄을 선택하세요' :
							snapshotData === '' || snapshotData === undefined ? '로딩 중...' :
								'스냅샷을 선택하세요'}
					</option>

					{snapshotData?.map((data, index) => (
						<option key={index} value={data.snapshot_index}>
							{data.snapshot_index}({data.snapshot_time})
						</option>
					))}
				</SelectInput>
			</InputGroup>
		</>
	];
	return <SearchBarLayout firstColumnData={searchList} onReset={onReset} handleSubmit={handleSubmit} />;
};

export default RankInfoSearchBar;