import { styled } from 'styled-components';

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

const AdminViewSearchBar = ({ handleSearch, groupList, setResultData, setCurrentPage }) => {
	const [searchData, setSearchData] = useState({
		searchOption: 'name',
		data: '',
		authorityOption: '',
		joinCheck: false,
	});

	const handleSubmit = event => {
		event.preventDefault();

		handleSearch(searchData.searchOption, searchData.data, searchData.authorityOption, searchData.joinCheck);
		setResultData(searchData);
		setCurrentPage(1);
	};

	const handleReset = () => {
		setSearchData({
			searchOption: 'name',
			data: '',
			authorityOption: '',
			joinCheck: false,
		});
		handleSearch('name', '', '', false);
		setResultData('name', '', '', false);
		setCurrentPage(1);
		window.location.reload();
	};

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

	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' ? '이름 입력' : '이메일 입력'}
				/>
			</InputGroup>
		</>,
		<>
			<InputLabel>관리자 권한</InputLabel>
			<SelectInput value={searchData.authorityOption} onChange={e => setSearchData({ ...searchData, authorityOption: e.target.value })}>
				<option key={1} value={''}>
					전체
				</option>
				{groupList &&
					groupList.map((data, index) => (
						<option key={index} value={data.group_id}>
							{data.group_nm}
						</option>
					))}
			</SelectInput>
		</>,
		<>
			{/*<CheckBox id="input-check" label="가입 신청" checked={searchData.joinCheck} setData={e => setSearchData({ ...searchData, joinCheck: e.target.checked })} />*/}
		</>,
		<>
			<BtnWrapper $gap="8px">
				<Button theme="reset" handleClick={handleReset} type="button" />
				<Button theme="search" text="검색" handleClick={handleSubmit} type="submit" />
			</BtnWrapper>
		</>,
	];

	return <SearchBarLayout firstColumnData={searchList} />;
};

export default AdminViewSearchBar;

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