import { useState } from 'react';
import DatePicker, { registerLocale } from 'react-datepicker';
import { ko } from 'date-fns/esm/locale';
import 'react-datepicker/dist/react-datepicker.css';

import CheckBox from '../input/CheckBox';
import Button from '../button/Button';

import styled from 'styled-components';
import { TextInput, SelectInput, BtnWrapper, InputLabel } from '../../../styles/Components';

// 캘린더
import IconCalendar from '../../../assets/img/icon/icon-date.png';
import IconArrow from '../../../assets/img/icon/icon-arrow.png';
import { getMonth, getYear } from 'date-fns';
import range from 'lodash/range';

const SearchBar = props => {
	const [startDateNew, setStartDateNew] = useState(new Date());
	const [startDate, setStartDate] = useState(null);
	const [endDate, setEndDate] = useState(null);
	const years = range(1990, getYear(new Date()) + 1, 1);
	const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
	if (props.type === 'userview') {
		return (
			<SearchbarStyle>
				<SearchItem>
					<InputLabel>검색</InputLabel>
					<InputGroup>
						<SelectInput>
							<option value="name">이름</option>
							<option value="id">ID</option>
						</SelectInput>
						<TextInput type="text" />
					</InputGroup>
				</SearchItem>
				<SearchItem>
					<InputLabel>관리자 권한</InputLabel>
					<SelectInput>
						<option value="A">사용자 권한_A</option>
						<option value="B">사용자 권한_B</option>
						<option value="A">사용자 권한_C</option>
						<option value="B">사용자 권한_D</option>
					</SelectInput>
				</SearchItem>
				<SearchItem>
					<CheckBox id="input-check" label="가입 신청" />
				</SearchItem>
				<BtnWrapper $gap="8px">
					<Button theme="reset" />
					<Button theme="gray" text="검색" />
				</BtnWrapper>
			</SearchbarStyle>
		);
	} else if (props.type === 'logview') {
		return (
			<SearchbarStyle2>
				<SearchRow>
					<SearchItem>
						<InputLabel>검색</InputLabel>
						<InputGroup>
							<SelectInput>
								<option value="name">이름</option>
								<option value="id">ID</option>
							</SelectInput>
							<TextInput type="text" />
						</InputGroup>
					</SearchItem>
					<SearchItem>
						<InputLabel>로그</InputLabel>
						<InputGroup>
							<SelectInput name="" id="">
								<option>구분 선택</option>
								<option value="">회원가입 승인</option>
								<option value="">회원가입 불가</option>
								<option value="">사용자 정보 수정</option>
								<option value="">사용자 정보 삭제</option>
								<option value="">사용자 비밀번호 초기화</option>
								<option value="">신규 그룹 생성</option>
								<option value="">그룹 수정</option>
								<option value="">그룹 삭제</option>
								<option value="">공지사항 등록</option>
								<option value="">공지사항 수정</option>
								<option value="">공지사항 삭제</option>
								<option value="">우편 발송</option>
								<option value="">우편 회수</option>
								<option value="">유저 정보 수정</option>
								<option value="">화이트리스트 등록</option>
								<option value="">화이트리스트 수정</option>
								<option value="">유저 제재</option>
							</SelectInput>
							<SelectInput name="" id="">
								<option>상세 이력 선택</option>
								<option value="">회원가입 승인</option>
								<option value="">회원가입 불가</option>
								<option value="">사용자 정보 수정</option>
								<option value="">사용자 정보 삭제</option>
								<option value="">사용자 비밀번호 초기화</option>
								<option value="">신규 그룹 생성</option>
								<option value="">그룹 수정</option>
								<option value="">그룹 삭제</option>
								<option value="">공지사항 등록</option>
								<option value="">공지사항 수정</option>
								<option value="">공지사항 삭제</option>
								<option value="">우편 발송</option>
								<option value="">우편 회수</option>
								<option value="">유저 정보 수정</option>
								<option value="">화이트리스트 등록</option>
								<option value="">화이트리스트 수정</option>
								<option value="">유저 제재</option>
							</SelectInput>
						</InputGroup>
					</SearchItem>
				</SearchRow>
				<SearchItem>
					<InputLabel>기간</InputLabel>
					<DatePickerWrapper>
						<DatePicker
							selected={startDate}
							onChange={date => setStartDate(date)}
							className="datepicker"
							placeholderText="시작일자"
							calendarClassName="calendar"
							dateFormat="yyyy - MM - dd"
							locale="ko"
							renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
								<div className="calendar-top">
									<button
										className="btn-prev"
										onClick={e => {
											e.preventDefault();
											decreaseMonth();
										}}
										disabled={prevMonthButtonDisabled}></button>
									<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
										{years.map(option => (
											<option key={option} value={option}>
												{option}
											</option>
										))}
									</select>
									.
									<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
										{months.map(option => (
											<option key={option} value={option}>
												{option}
											</option>
										))}
									</select>
									<button
										className="btn-next"
										onClick={e => {
											e.preventDefault();
											increaseMonth();
										}}
										disabled={nextMonthButtonDisabled}></button>
								</div>
							)}
						/>
						<span>-</span>
						<DatePicker
							selected={endDate}
							onChange={date => setEndDate(date)}
							className="datepicker"
							placeholderText="종료일자"
							calendarClassName="calendar"
							dateFormat="yyyy - MM - dd"
							locale="ko"
							renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
								<div className="calendar-top">
									<button
										className="btn-prev"
										onClick={e => {
											e.preventDefault();
											decreaseMonth();
										}}
										disabled={prevMonthButtonDisabled}></button>
									<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
										{years.map(option => (
											<option key={option} value={option}>
												{option}
											</option>
										))}
									</select>
									.
									<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
										{months.map(option => (
											<option key={option} value={option}>
												{option}
											</option>
										))}
									</select>
									<button
										className="btn-next"
										onClick={e => {
											e.preventDefault();
											increaseMonth();
										}}
										disabled={nextMonthButtonDisabled}></button>
								</div>
							)}
						/>
					</DatePickerWrapper>
					<BtnWrapper $gap="8px">
						<Button theme="reset" />
						<Button theme="gray" text="검색" />
					</BtnWrapper>
				</SearchItem>
			</SearchbarStyle2>
		);
	} else if (props.type === 'authSetting') {
		return (
			<SearchbarStyle>
				<SearchItem>
					<InputLabel>관리자 그룹명</InputLabel>
					<TextInput type="text" placeholder="관리자 그룹명 입력" width="300px" />
				</SearchItem>
				<SearchItem>
					<InputLabel>설명</InputLabel>
					<TextInput type="text" placeholder="그룹 설명글을 입력하세요(최대 100자)" width="300px" />
				</SearchItem>

				<Button theme="gray" text="등록" />
			</SearchbarStyle>
		);
	} else if (props.type === 'whitelist') {
		return (
			<SearchbarStyle>
				<SearchItem>
					<InputLabel>직접입력</InputLabel>
					<TextInput type="text" placeholder="GUID 입력" width="300px" />
					<Button theme="gray" text="등록" />
				</SearchItem>
				<SearchItem>
					<InputLabel>일괄등록</InputLabel>
					<TextInput type="text" width="300px" placeholder=".xlsx, .xls 확장자의 파일만 업로드 가능합니다." />
					<Button theme="gray" text="엑셀 업로드" />
					<Button theme="gray" text="등록" />
				</SearchItem>
			</SearchbarStyle>
		);
	} else if (props.type === 'mail') {
		return (
			<SearchbarStyle2>
				<SearchRow>
					<SearchItem>
						<InputLabel>우편 제목</InputLabel>
						<TextInput type="text" placeholder="우편 제목" />
					</SearchItem>
					<SearchItem>
						<InputLabel>조회 일자</InputLabel>
						<InputGroup>
							<DatePickerWrapper>
								<DatePicker
									selected={startDate}
									onChange={date => setStartDate(date)}
									className="datepicker"
									placeholderText="시작일자"
									calendarClassName="calendar"
									dateFormat="yyyy - MM - dd"
									locale="ko"
									renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
										<div className="calendar-top">
											<button
												className="btn-prev"
												onClick={e => {
													e.preventDefault();
													decreaseMonth();
												}}
												disabled={prevMonthButtonDisabled}></button>
											<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
												{years.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											.
											<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
												{months.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											<button
												className="btn-next"
												onClick={e => {
													e.preventDefault();
													increaseMonth();
												}}
												disabled={nextMonthButtonDisabled}></button>
										</div>
									)}
								/>
								<span>~</span>
								<DatePicker
									selected={endDate}
									onChange={date => setEndDate(date)}
									className="datepicker"
									placeholderText="종료일자"
									calendarClassName="calendar"
									dateFormat="yyyy - MM - dd"
									locale="ko"
									renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
										<div className="calendar-top">
											<button
												className="btn-prev"
												onClick={e => {
													e.preventDefault();
													decreaseMonth();
												}}
												disabled={prevMonthButtonDisabled}></button>
											<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
												{years.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											.
											<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
												{months.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											<button
												className="btn-next"
												onClick={e => {
													e.preventDefault();
													increaseMonth();
												}}
												disabled={nextMonthButtonDisabled}></button>
										</div>
									)}
								/>
							</DatePickerWrapper>
						</InputGroup>
					</SearchItem>
				</SearchRow>
				<SearchRow>
					<SearchItem>
						<InputLabel>발송 방식</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>발송 상태</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>우편 타입</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>수신 대상</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<BtnWrapper $gap="8px">
						<Button theme="reset" />
						<Button theme="gray" text="검색" />
					</BtnWrapper>
				</SearchRow>
			</SearchbarStyle2>
		);
	} else if (props.type === 'userblock') {
		return (
			<SearchbarStyle2>
				<SearchRow>
					<SearchItem>
						<InputLabel>대상</InputLabel>
						<InputGroup>
							<SelectInput>
								<option value="id">GUID</option>
								<option value="name">닉네임</option>
							</SelectInput>
							<TextInput type="text" width="600px" placeholder="GUID 입력" />
						</InputGroup>
					</SearchItem>
					<SearchItem>
						<InputLabel>등록자</InputLabel>
						<TextInput type="text" placeholder="이메일 입력" width="600px" />
					</SearchItem>
				</SearchRow>
				<SearchRow>
					<SearchItem>
						<InputLabel>상태</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>제재 사유</InputLabel>
						<SelectInput>
							<option value="">접속제한</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>제재 기간</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<BtnWrapper $gap="8px">
						<Button theme="reset" />
						<Button theme="gray" text="검색" />
					</BtnWrapper>
				</SearchRow>
			</SearchbarStyle2>
		);
	} else if (props.type === 'reportlist') {
		return (
			<SearchbarStyle2>
				<SearchRow>
					<SearchItem>
						<InputLabel>신고 일자</InputLabel>
						<DatePickerWrapper>
							<DateGroup>
								<DatePicker
									selected={startDateNew}
									onChange={date => setStartDate(date)}
									className="datepicker"
									placeholderText="검색기간 선택"
									calendarClassName="calendar"
									dateFormat="yyyy - MM - dd"
									locale="ko"
									renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
										<div className="calendar-top">
											<button
												className="btn-prev"
												onClick={e => {
													e.preventDefault();
													decreaseMonth();
												}}
												disabled={prevMonthButtonDisabled}></button>
											<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
												{years.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											.
											<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
												{months.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											<button
												className="btn-next"
												onClick={e => {
													e.preventDefault();
													increaseMonth();
												}}
												disabled={nextMonthButtonDisabled}></button>
										</div>
									)}
								/>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
							</DateGroup>
							<span>~</span>
							<DateGroup>
								<DatePicker
									selected={startDateNew}
									onChange={date => setEndDate(date)}
									className="datepicker"
									placeholderText="검색기간 선택"
									calendarClassName="calendar"
									dateFormat="yyyy - MM - dd"
									locale="ko"
									renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
										<div className="calendar-top">
											<button
												className="btn-prev"
												onClick={e => {
													e.preventDefault();
													decreaseMonth();
												}}
												disabled={prevMonthButtonDisabled}></button>
											<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
												{years.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											.
											<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
												{months.map(option => (
													<option key={option} value={option}>
														{option}
													</option>
												))}
											</select>
											<button
												className="btn-next"
												onClick={e => {
													e.preventDefault();
													increaseMonth();
												}}
												disabled={nextMonthButtonDisabled}></button>
										</div>
									)}
								/>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
								<SelectInput>
									<option value="">00</option>
									<option value="">01</option>
								</SelectInput>
							</DateGroup>
						</DatePickerWrapper>
					</SearchItem>
				</SearchRow>
				<SearchRow>
					<SearchItem>
						<InputLabel>신고 유형</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
							<option value="">전체</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>상태</InputLabel>
						<SelectInput>
							<option value="">전체</option>
							<option value="">해결</option>
							<option value="">미해결</option>
						</SelectInput>
					</SearchItem>
					<SearchItem>
						<InputLabel>신고자 / 담당자</InputLabel>
						<InputGroup>
							<SelectInput>
								<option value="">전체</option>
								<option value="">신고자</option>
								<option value="">담당자</option>
							</SelectInput>
							<TextInput placeholder="입력" />
						</InputGroup>
					</SearchItem>
					<BtnWrapper $gap="8px">
						<Button theme="reset" />
						<Button theme="gray" text="검색" />
					</BtnWrapper>
				</SearchRow>
			</SearchbarStyle2>
		);
	}
};

export default SearchBar;

const SearchbarStyle = styled.div`
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
	font-size: 14px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-bottom: 40px;
`;
const SearchbarStyle2 = styled(SearchbarStyle)`
	flex-flow: column;
	gap: 20px;
`;
const SearchRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
`;
const SearchItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: 50px;

	${TextInput}, ${SelectInput} {
		height: 35px;
	}
	${TextInput} {
		padding: 0 10px;
		max-width: 400px;
	}
`;

const DatePickerWrapper = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 5px 0;
	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 InputGroup = styled.div`
	display: flex;
	align-items: center;
	gap: 5px;
`;
const DateGroup = styled.div`
	display: flex;
	align-items: center;
	${SelectInput} {
		margin-left: 5px;
	}
`;

registerLocale('ko', ko);
