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';
import { opHistoryType } from '../../../assets/data/options';

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

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



	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 })}>
					{opHistoryType.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()}
			/>
		</>,
	];

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

export default LogViewSearchBar;

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