import React, { useState, useEffect } from 'react';
import DatePickerComponent from './DatePickerComponent';
import { DatePickerWrapper } from '../../../styles/Components';
import {
	FormRowGroup,
	FormLabel,
	DateTimeGroup, DateTimeWrapper, DateContainer, StyledSelectInput, TimeSeparator, TimeContainer,
} from '../../../styles/ModuleComponents';
import { HourList, MinuteList } from '../../../assets/data';
import { useTranslation } from 'react-i18next';

const DateTimeRangePicker = ({
								 label,
								 startDate,
								 endDate,
								 onStartDateChange,
								 onEndDateChange,
								 pastDate = new Date(),
								 disabled,
								 startLabel = '시작 일자',
								 endLabel = '종료 일자',
								 reset = false,
								 setAlert
							 }) => {
	const { t } = useTranslation();
	const [startHour, setStartHour] = useState('00');
	const [startMin, setStartMin] = useState('00');
	const [endHour, setEndHour] = useState('00');
	const [endMin, setEndMin] = useState('00');

	useEffect(() => {
		if (startDate) {
			const date = new Date(startDate);
			setStartHour(String(date.getHours()).padStart(2, '0'));
			setStartMin(String(date.getMinutes()).padStart(2, '0'));
		}
	}, [startDate]);

	useEffect(() => {
		if (endDate) {
			const date = new Date(endDate);
			setEndHour(String(date.getHours()).padStart(2, '0'));
			setEndMin(String(date.getMinutes()).padStart(2, '0'));
		}
	}, [endDate]);

	useEffect(() => {
		if (reset) {
			setStartHour('00');
			setStartMin('00');
			setEndHour('00');
			setEndMin('00');
		}
	}, [reset]);

	const handleStartDate = (date) => {
		const newDate = new Date(date);
		newDate.setHours(parseInt(startHour), parseInt(startMin));
		onStartDateChange(newDate);
	};

	const handleEndDate = (date) => {
		let newDate = new Date(date);
		newDate.setHours(parseInt(endHour), parseInt(endMin));

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

		onEndDateChange(newDate);
	};

	const handleStartTime = (e) => {
		const { id, value } = e.target;
		const newDate = startDate ? new Date(startDate) : new Date();

		if (id === 'hour') {
			setStartHour(value);
			newDate.setHours(parseInt(value), parseInt(startMin));
		} else {
			setStartMin(value);
			newDate.setHours(parseInt(startHour), parseInt(value));
		}

		onStartDateChange(newDate);
	};

	const handleEndTime = (e) => {
		const { id, value } = e.target;
		let newDate = endDate ? new Date(endDate) : new Date();

		if (id === 'hour') {
			setEndHour(value);
			newDate.setHours(parseInt(value), parseInt(endMin));
		} else {
			setEndMin(value);
			newDate.setHours(parseInt(endHour), parseInt(value));
		}

		if (startDate && newDate < startDate) {
			setAlert(t('TIME_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>
					<TimeContainer>
						<StyledSelectInput onChange={handleStartTime} id="hour" value={startHour} disabled={disabled}>
							{HourList.map(hour => (
								<option value={hour} key={hour}>{hour}</option>
							))}
						</StyledSelectInput>
						<TimeSeparator>:</TimeSeparator>
						<StyledSelectInput onChange={handleStartTime} id="min" value={startMin} disabled={disabled}>
							{MinuteList.map(min => (
								<option value={min} key={min}>{min}</option>
							))}
						</StyledSelectInput>
					</TimeContainer>
				</DateTimeGroup>

				<DateTimeGroup>
					<DateContainer>
						<DatePickerWrapper>
							<DatePickerComponent
								name={endLabel}
								handleSelectedDate={handleEndDate}
								selectedDate={endDate}
								pastDate={pastDate}
								disabled={disabled}
							/>
						</DatePickerWrapper>
					</DateContainer>
					<TimeContainer>
						<StyledSelectInput onChange={handleEndTime} id="hour" value={endHour} disabled={disabled}>
							{HourList.map(hour => (
								<option value={hour} key={hour}>{hour}</option>
							))}
						</StyledSelectInput>
						<TimeSeparator>:</TimeSeparator>
						<StyledSelectInput onChange={handleEndTime} id="min" value={endMin} disabled={disabled}>
							{MinuteList.map(min => (
								<option value={min} key={min}>{min}</option>
							))}
						</StyledSelectInput>
					</TimeContainer>
				</DateTimeGroup>
			</DateTimeWrapper>
		</FormRowGroup>
	);
};

export default DateTimeRangePicker;