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

const AuthRegistBar = ({ handleRegistModalClose, $isNullValue, registData, setRegistData, nullMessage }) => {
	const searchList = [
		<>
			<InputLabel>관리자 그룹명*</InputLabel>
			<TextInput
				name="group_nm"
				type="text"
				placeholder="관리자 그룹명 입력"
				id="group_nm"
				width="300px"
				onChange={e => setRegistData({ ...registData, group_nm: e.target.value.trimStart() })}
			/>
		</>,
		<>
			<InputLabel>설명</InputLabel>
			<TextInput
				name="description"
				type="text"
				placeholder="그룹 설명글을 입력하세요(최대 100자)"
				id="description"
				width="300px"
				onChange={e => setRegistData({ ...registData, description: e.target.value.trimStart() })}
				maxLength={100}
			/>
		</>,
		<>
			<Button theme={registData.group_nm ? 'search' : 'disable'} text="등록" type="button" handleClick={handleRegistModalClose} width="100px" height="35px" />
			{$isNullValue && <SearchBarAlert>{nullMessage}</SearchBarAlert>}
		</>,
	];

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

export default AuthRegistBar;
