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

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

const SegmentSearchBar = ({ resultData, setResultData, handleSearch, fetchData }) => {
	// 초기 날짜 세팅
	const END_DATE = new Date();

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

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

		setResultData({ search_dt: resultSendData });
	};

	// 발송 날짜 세팅 로직

	const handleReset = e => {
		e.preventDefault();
		setResultData({ search_dt: END_DATE });

		fetchData(END_DATE);
	};

	// console.log(resultData);

	return (
		<>
			<FormWrapper>
				<SearchbarStyle2>
					<SearchRow>
						<SearchItem>
							<InputLabel>집계 기준일</InputLabel>
							<InputGroup>
								<DatePickerWrapper>
									<DatePickerComponent name="집계 기준일" selectedDate={resultData.search_dt} handleSelectedDate={data => handleSelectedDate(data)} maxDate={new Date()} />
								</DatePickerWrapper>
							</InputGroup>
						</SearchItem>
						{/* 기획 보류 */}
						{/* <SearchItem>
						<InputLabel>조회 국가</InputLabel>
						<SelectInput>
							<option value="">ALL</option>
							<option value="">KR</option>
							<option value="">EN</option>
							<option value="">JP</option>
							<option value="">TH</option>
						</SelectInput>
					</SearchItem> */}
						<BtnWrapper $gap="8px">
							<Button theme="reset" handleClick={handleReset} />
							<Button
								theme="search"
								text="검색"
								handleClick={e => {
									e.preventDefault();
									handleSearch(resultData.search_dt);
								}}
							/>
						</BtnWrapper>
					</SearchRow>
					<SearchNoti>※ 집계 기준일 기준 -100일까지의 Segment 유저 분포를 집계합니다.</SearchNoti>
				</SearchbarStyle2>
			</FormWrapper>
		</>
	);
};

export default SegmentSearchBar;

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 SearchbarStyle2 = styled(SearchbarStyle)`
	flex-flow: column;
	gap: 10px;
`;

const SearchRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
`;
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;
	}
`;
const SearchNoti = styled.div`
	font-size: 12px;
	color: #999;
	letter-spacing: 0.5px;
`;
