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

const ReportListSearchBar = ({ handleSearch, setResultData }) => {
	let d = new Date();
	const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
	const END_DATE = new Date();

	const reportType = [
		{ value: 'ALL', name: '전체' },
		{ value: 'UNMANNERED_ACT', name: '비매너 행위' },
		{ value: 'USE_UNHEALTHY_NAMES', name: '불건전 이름 사용' },
		{ value: 'CASH_TRADING', name: '현금거래 행위' },
		{ value: 'INTERFERENCE_GAME', name: '게임 진행 방해' },
		{ value: 'INTERFERENCE_SERVICE', name: '운영서비스 방해' },
		{ value: 'ACCOUNT_EXPLOITATION', name: '계정도용' },
		{ value: 'BUG_ABUSING', name: '버그/어뷰징' },
		{ value: 'USE_HACK', name: '불법프로그램 사용' },
		{ value: 'LEAK_PERSONAL_INFO', name: '개인정보 유출' },
		{ value: 'PRETENDING_GM', name: '운영자 사칭' },
	];

	const reportState = [
		{ value: 'ALL', name: '전체' },
		{ value: 'RESOLVED', name: '해결' },
		{ value: 'UNRESOLVED', name: '미해결' },
	];

	const searchType = [
		{ value: 'ALL', name: '전체' },
		{ value: 'GUID', name: '신고자' },
		{ value: 'EMAIL', name: '담당자' },
	];

	const [searchData, setSearchData] = useState({
		startDate: START_DATE,
		endDate: END_DATE,
		reportType: 'ALL',
		status: 'ALL',
		searchType: 'ALL',
		searchKey: '',
	});

	// console.log(searchData);

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

		handleSearch(
			searchData.startDate ? new Date(searchData.startDate).toISOString().split('.')[0] : new Date(START_DATE).toISOString().split('.')[0],
			searchData.endDate ? new Date(searchData.endDate).toISOString().split('.')[0] : new Date(END_DATE).toISOString().split('.')[0],
			searchData.reportType ? searchData.reportType : 'ALL',
			searchData.status ? searchData.status : 'ALL',
			searchData.searchType ? searchData.searchType : 'ALL',
			searchData.searchKey ? searchData.searchKey : '',
		);
		setResultData(searchData);
	};

	const handleReset = () => {
		setSearchData({
			startDate: START_DATE,
			endDate: END_DATE,
			reportType: 'ALL',
			status: 'ALL',
			searchKey: '',
			order: 'DESC',
		});
		handleSearch(START_DATE, END_DATE, 'ALL', 'ALL', 'ALL', '');
		setResultData(START_DATE, END_DATE, 'ALL', 'ALL', '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 })}
				maxDate={new Date()}
			/>
		</>,
	];

	const optionList = [
		<>
			<InputLabel>신고 유형</InputLabel>
			<SelectInput value={searchData.reportType || ''} onChange={e => setSearchData({ ...searchData, reportType: e.target.value })}>
				{reportType.map((data, index) => (
					<option key={index} value={data.value || ''}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>상태</InputLabel>
			<SelectInput value={searchData.status || ''} onChange={e => setSearchData({ ...searchData, status: e.target.value })}>
				{reportState.map((data, index) => (
					<option key={index} value={data.value || ''}>
						{data.name}
					</option>
				))}
			</SelectInput>
		</>,
		<>
			<InputLabel>신고자 / 담당자</InputLabel>
			<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 placeholder="입력" onChange={e => setSearchData({ ...searchData, searchKey: e.target.value })} />
			</InputGroup>
		</>,
		<>
			<BtnWrapper $gap="8px">
				<Button theme="reset" handleClick={handleReset} type="button" />
				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
			</BtnWrapper>
		</>,
	];
	return <SearchBarLayout firstColumnData={searchList} secondColumnData={optionList} direction={'column'} />;
};

export default ReportListSearchBar;

const InputGroup = styled.div`
	display: flex;
	align-items: center;
	gap: 5px;
`;
