import React from 'react';
import DatePickerComponent from './DatePickerComponent';
import { DatePickerWrapper } from '../../../styles/Components';
import {
	FormRowGroup,
	FormLabel,
	DateContainer,
	DateTimeWrapper,
	DateTimeGroup,
} from '../../../styles/ModuleComponents';
import { useTranslation } from 'react-i18next';

const DateRangePicker = ({
							 label,
							 startDate,
							 endDate,
							 onStartDateChange,
							 onEndDateChange,
							 pastDate = new Date(),
							 disabled,
							 startLabel = '시작 일자',
							 endLabel = '종료 일자',
							 setAlert,
						 }) => {
	const { t } = useTranslation();

	const handleStartDate = (date) => {
		const newDate = new Date(date);
		onStartDateChange(newDate);
	};

	const handleEndDate = (date) => {
		let newDate = new Date(date);

		if (startDate && newDate < startDate) {
			setAlert(t('DATE_START_DIFF_END'));
			newDate = new Date(startDate);
		}

		onEndDateChange(newDate);
	};

	return (
		<FormRowGroup>
			<FormLabel>{label}</FormLabel>
			<DateTimeWrapper>
				<DateTimeGroup>
					<DateContainer>
						<DatePickerWrapper>
							<DatePickerComponent
								name={startLabel}
								handleSelectedDate={handleStartDate}
								selectedDate={startDate}
								pastDate={pastDate}
								disabled={disabled}
							/>
						</DatePickerWrapper>
					</DateContainer>
				</DateTimeGroup>

				<DateTimeGroup>
					<DateContainer>
						<DatePickerWrapper>
							<DatePickerComponent
								name={endLabel}
								handleSelectedDate={handleEndDate}
								selectedDate={endDate}
								pastDate={pastDate}
								disabled={disabled}
							/>
						</DatePickerWrapper>
					</DateContainer>
				</DateTimeGroup>
			</DateTimeWrapper>
		</FormRowGroup>
	);
};

export default DateRangePicker;