import { DateGroup, DatePickerWrapper, InputGroup, InputLabel, SelectInput } from '../../../styles/Components';
import DatePickerComponent from '../Date/DatePickerComponent';
import { HourList, MinuteList } from '../../../assets/data';
import { RegistInputItem, SubText } from '../../../styles/ModuleComponents';
import { useTranslation } from 'react-i18next';

const DateTimeInput = ({title, dateName, selectedDate, handleSelectedDate, onChange}) => {
	const { t } = useTranslation();
	return(
		<RegistInputItem>
			{title && <InputLabel>{title}</InputLabel>}
			<DateGroup>
				<InputGroup>
					<DatePickerWrapper>
						<DatePickerComponent name={dateName} selectedDate={selectedDate} handleSelectedDate={handleSelectedDate} pastDate={new Date()} />
					</DatePickerWrapper>
					<SelectInput
						onChange={onChange}
						id="hour"
						defaultValue={selectedDate && String(selectedDate.getHours()).padStart(2, '0')}
					>
						{HourList.map(hour => (
							<option value={hour} key={hour}>
								{hour}
							</option>
						))}
					</SelectInput>
					<SelectInput
						onChange={onChange}
						id="min"
						defaultValue={selectedDate && String(selectedDate.getMinutes()).padStart(2, '0')}
					>
						{MinuteList.map(min => (
							<option value={min} key={min}>
								{min}
							</option>
						))}
					</SelectInput>
				</InputGroup>
				<SubText>{t('DATE_KTC')}</SubText>
			</DateGroup>
		</RegistInputItem>
	)
}

export default DateTimeInput;