import { styled } from 'styled-components';

import { SelectInput } from '../../../styles/Components';

import IconCalendar from '../../../assets/img/icon/icon-date.png';
import IconArrow from '../../../assets/img/icon/icon-arrow.png';
import DatePickerComponent from '../Date/DatePickerComponent';

const SearchPeriod = ({ isTime, startDate, handleStartDate, endDate, handleEndDate, onChange, maxDate }) => {
	return (
		<DatePickerWrapper>
			<DateGroup>
				<DatePickerComponent
					maxDate={maxDate}
					selectedDate={startDate}
					handleSelectedDate={data => {
						handleStartDate(data);
					}}
				/>
				{isTime && (
					<>
						<SelectInput>
							<option value="">00</option>
							<option value="">01</option>
						</SelectInput>
						<SelectInput>
							<option value="">00</option>
							<option value="">01</option>
						</SelectInput>
					</>
				)}
			</DateGroup>
			<span>-</span>
			<DateGroup>
				<DatePickerComponent maxDate={maxDate} selectedDate={endDate} handleSelectedDate={data => handleEndDate(data)} pastDate={startDate} />
				{isTime && (
					<>
						<SelectInput>
							<option value="">00</option>
							<option value="">01</option>
						</SelectInput>
						<SelectInput>
							<option value="">00</option>
							<option value="">01</option>
						</SelectInput>
					</>
				)}
			</DateGroup>
		</DatePickerWrapper>
	);
};

export default SearchPeriod;

const DatePickerWrapper = styled.div`
	display: flex;
	align-items: center;
	.datepicker {
		width: 160px;
		border: 1px solid #e0e0e0;
		padding: 5px 40px 5px 15px;
		border-radius: 5px;
		line-height: 18px;
		font-size: 14px;
		height: 35px;
		background: url(${IconCalendar}) center right no-repeat;
		&::placeholder {
			color: #b8b8b8;
		}
	}

	.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
		border-bottom-color: #fff;
	}
	.calendar {
		.react-datepicker__header {
			background: #fff;
		}
		.btn-prev,
		.btn-next {
			width: 26px;
			height: 26px;
			overflow: hidden;
		}
		.btn-prev {
			background: url(${IconArrow}) 0 50% no-repeat;
		}
		.btn-next {
			background: url(${IconArrow}) -26px 50% no-repeat;
		}

		.calendar-top {
			button {
				margin: 0 10px;
			}
			select {
				font-size: 16px;
				padding: 10px 0;
			}
		}
		.react-datepicker__day-names > div:first-child,
		.react-datepicker__week > div:first-child {
			color: #ff0000;
		}
		.react-datepicker__day-names > div:last-child,
		.react-datepicker__week > div:last-child {
			color: #256bfa;
		}
	}
	span {
		padding: 0 10px;
	}
`;

const DateGroup = styled.div`
	display: flex;
	align-items: center;
	${SelectInput} {
		margin-left: 5px;
	}
`;
