import { useEffect, useState } from 'react';
import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';

import 'react-datepicker/dist/react-datepicker.css';
import DatePickerComponent from '../common/Date/DatePickerComponent';

import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper, InputGroup, DatePickerWrapper } from '../../styles/Components';

const UserIndexSearchBar = ({ resultData, setResultData, handleSearch, fetchData }) => {
	// 초기 날짜 세팅
	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();

	// resultData에 임의 날짜 넣어주기
	useEffect(() => {
		setResultData({
			send_dt: START_DATE,
			end_dt: END_DATE,
		});
	}, []);

	const searchType = [
		{ name: '전체', value: 'ALL' },
		{ name: '한국어', value: 'KR' },
		{ name: '영어', value: 'EN' },
		{ name: '일본어', value: 'JP' },
		{ name: '태국어', value: 'TH' },
	];

	// 발송 날짜 세팅 로직
	const handleSelectedDate = data => {
		const sendDate = new Date(data);
		const resultSendData = new Date(sendDate.getFullYear(), sendDate.getMonth(), sendDate.getDate());

		setResultData({ ...resultData, send_dt: resultSendData });
	};

	// 발송 날짜 세팅 로직
	const handleEndDate = data => {
		const endDate = new Date(data);
		const resultSendData = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());

		setResultData({ ...resultData, end_dt: resultSendData });
	};

	const handleReset = e => {
		e.preventDefault();
		setResultData({ send_dt: START_DATE, end_dt: END_DATE });

		fetchData(START_DATE, END_DATE);
	};

	return (
		<>
			<FormWrapper>
				<SearchbarStyle>
					<SearchItem>
						<InputLabel>집계 기간</InputLabel>
						<InputGroup>
							<DatePickerWrapper>
								<DatePickerComponent 
									name="시작 일자" 
									selectedDate={resultData.send_dt} 
									handleSelectedDate={data => handleSelectedDate(data)} 
									maxDate={new Date()} />
								<span>~</span>
								<DatePickerComponent 
									name="종료 일자" 
									selectedDate={resultData.end_dt} 
									handleSelectedDate={data => handleEndDate(data)} 
									pastDate = {resultData.send_dt}
									maxDate={new Date()} />
							</DatePickerWrapper>
						</InputGroup>
					</SearchItem>
					{/* 기획 보류 */}
					{/* <SearchItem>
						<InputLabel>조회 국가</InputLabel>
						<SelectInput
						// onChange={e => setResultData({ ...resultData, searchType: e.target.value })}
						>
							{searchType.map((option, index) => (
								<option key={index} value={option.value}>
									{option.name}
								</option>
							))}
						</SelectInput>
					</SearchItem> */}
					<BtnWrapper $gap="8px">
						<Button theme="reset" handleClick={handleReset} />
						<Button
							theme="search"
							text="검색"
							handleClick={e => {
								e.preventDefault();
								handleSearch(resultData.send_dt, resultData.end_dt);
							}}
						/>
					</BtnWrapper>
				</SearchbarStyle>
			</FormWrapper>
		</>
	);
};

export default UserIndexSearchBar;

const SearchbarStyle = styled.div`
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
	font-size: 14px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-bottom: 40px;
`;

const SearchItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: 50px;

	${TextInput}, ${SelectInput} {
		height: 35px;
	}
	${TextInput} {
		padding: 0 10px;
		max-width: 400px;
	}
`;
