import { styled } from 'styled-components';
import { useState } from 'react';

import { TextInput, InputLabel, SelectInput, BtnWrapper } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout, SearchPeriod } from '../common/SearchBar';

const LogViewSearchBar = ({ handleSearch, resultData }) => {
	const [searchData, setSearchData] = useState({
		searchOption: 'name',
		data: '',
		logOption: '',
		startDate: '',
		endDate: '',
	});

	const searchOption = [
		{ value: 'name', name: '이름' },
		{ value: 'id', name: 'ID(이메일)' },
	];

	const logOption = [
		{ value: '', name: '이력 선택' },
		{ value: 'LOGIN_PERMITTED', name: '로그인 승인' },
		{ value: 'ADMIN_INFO_UPDATE', name: '운영자 정보 수정' },
		{ value: 'ADMIN_INFO_DELETE', name: '운영자 정보 삭제' },
		{ value: 'PASSWORD_INIT', name: '비밀번호 초기화' },
		{ value: 'USER_INFO_UPDATE', name: '유저 정보 변경' },
		{ value: 'GROUP_AUTH_UPDATE', name: '그룹 권한 수정' },
		{ value: 'GROUP_DELETE', name: '그룹 삭제' },
		{ value: 'NOTICE_DELETE', name: '인게임 메시지 삭제' },
		{ value: 'MAIL_DELETE', name: '우편 삭제' },
		{ value: 'WHITELIST_DELETE', name: '화이트리스트 삭제' },
		{ value: 'BLACKLIST_DELETE', name: '유저 제재 삭제' },
		{ value: 'REPORT_DELETE', name: '신고내역 삭제' },
	];

	const handleReset = () => {
		setSearchData({
			searchOption: 'name',
			data: '',
			logOption: '',
			startDate: '',
			endDate: '',
		});
		handleSearch('name', '', '', '', '');
		resultData('name', '', '', '', '');
		window.location.reload();
	};

	const handleSubmit = event => {
		event.preventDefault();
		handleSearch(
			searchData.searchOption,
			searchData.data,
			searchData.logOption,
			searchData.startDate !== '' ? new Date(searchData.startDate).toISOString() : '',
			searchData.endDate !== '' ? new Date(searchData.endDate).toISOString() : '',
		);
		resultData(searchData);
	};

	// console.log(searchData.startDate.length)

	const searchList = [
		<>
			<InputLabel>검색</InputLabel>
			<InputGroup>
				<SelectInput value={searchData.searchOption} onChange={e => setSearchData({ ...searchData, searchOption: e.target.value })}>
					{searchOption.map((data, index) => (
						<option key={index} value={data.value}>
							{data.name}
						</option>
					))}
				</SelectInput>
				<TextInput
					value={searchData.data}
					type="text"
					onChange={e => setSearchData({ ...searchData, data: e.target.value })}
					placeholder={searchData.searchOption === 'name' ? '이름 입력' : 'ID 입력'}
				/>
			</InputGroup>
		</>,
		<>
			<InputLabel>사용 이력</InputLabel>
			<InputGroup>
				<SelectInput value={searchData.logOption} onChange={e => setSearchData({ ...searchData, logOption: e.target.value })}>
					{logOption.map((data, index) => (
						<option key={index} value={data.value}>
							{data.name}
						</option>
					))}
				</SelectInput>
			</InputGroup>
		</>,
	];

	const periodList = [
		<>
			<InputLabel>기간</InputLabel>
			<SearchPeriod
				startDate={searchData.startDate}
				handleStartDate={data => {
					setSearchData({ ...searchData, startDate: data });
				}}
				endDate={searchData.endDate}
				handleEndDate={data => setSearchData({ ...searchData, endDate: data })}
				onChange={searchData.startDate === null && setSearchData({ ...searchData, startDate: '', endDate: '' })}
				maxDate={new Date()}
			/>
		</>,
		<>
			<BtnWrapper $gap="8px">
				<Button theme="reset" handleClick={handleReset} type="button" />
				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
			</BtnWrapper>
		</>,
	];

	return <SearchBarLayout firstColumnData={searchList} secondColumnData={periodList} direction={'column'} />;
};

export default LogViewSearchBar;

const InputGroup = styled.div`
	display: flex;
	align-items: center;
	gap: 5px;
`;
