import { TextInput, InputLabel, InputGroup, SearchBarAlert } from '../../styles/Components';
import Button from '../common/button/Button';
import { SearchBarLayout } from '../common/SearchBar';

import WhiteListUploadBtn from './WhiteListUploadBtn';

const WhiteListRegistBar = ({ handleRegistModalClose, isNullValue, resultData, setResultData }) => {
	const token = sessionStorage.getItem('token');

	// console.log(isNullValue)

	const searchList = [
		<>
			<InputLabel>직접입력</InputLabel>
			<InputGroup>
				<TextInput
					type="text"
					placeholder="GUID 입력"
					width="300px"
					id="guid"
					onChange={e => {
						setResultData({ ...resultData, guid: e.target.value });
					}}
					onKeyDown={event => {
						if (event.key === 'Enter') {
							event.preventDefault();
						}
					}}
				/>
				<Button theme={resultData.guid ? 'search' : 'gray'} text="등록" handleClick={handleRegistModalClose} />
			</InputGroup>
		</>,
		<> {isNullValue && <SearchBarAlert>필수값을 입력해주세요</SearchBarAlert>}</>,
		<>
			<WhiteListUploadBtn />
		</>,
	];

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

export default WhiteListRegistBar;
