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

const TimeRangePicker = ({
							 label,
							 startTime,
							 endTime,
							 onStartTimeChange,
							 onEndTimeChange,
							 disabled,
							 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 (startTime) {
			const time = new Date(startTime);
			setStartHour(String(time.getHours()).padStart(2, '0'));
			setStartMin(String(time.getMinutes()).padStart(2, '0'));
		}
	}, [startTime]);

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

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

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

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

		onStartTimeChange(time);
	};

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

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

		// 시작 시간보다 종료 시간이 이전인 경우 체크
		if (startTime) {
			const startDateTime = new Date(startTime);
			if (time < startDateTime) {
				setAlert(t('TIME_START_DIFF_END'));
				time = new Date(startTime);
			}
		}

		onEndTimeChange(time);
	};

	return (
		<FormRowGroup>
			<FormLabel>{label}</FormLabel>
			<DateTimeWrapper>
				<DateTimeGroup>
					<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>
					<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 TimeRangePicker;