import { BtnWrapper, ButtonClose, ModalText } from '../../../styles/Components';
import Button from '../button/Button';
import Modal from './Modal';
import { modalTypes } from '../../../assets/data';

const DynamicModal = ({modalType, view, handleSubmit, handleCancel, modalText, children, ChildView}) => {
	if (!view) return null;

	const OkButton = ({handleClick}) => {
		return <Button
			text="확인"
			theme="primary"
			type="submit"
			size="large"
			width="100%"
			handleClick={handleClick}
		/>
	}

	const CancelButton = ({handleClick}) => {
		return <Button text="취소" theme="line" size="large" width="100%" handleClick={handleClick} />
	}

	const ModalWrapper = ({children , modalText, handleCancel, view}) => {
		return (
			<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={view}>
				<BtnWrapper $justify="flex-end">
					<ButtonClose onClick={handleCancel} />
				</BtnWrapper>
				<ModalText $align="center">
					{modalText && modalText}
				</ModalText>
				<BtnWrapper $gap="10px">
					{children}
				</BtnWrapper>
			</Modal>
		)
	}

	switch (modalType) {
		case modalTypes.confirmOkCancel:
			return (
				<ModalWrapper view={view} modalText={modalText} handleCancel={handleCancel} >
					<CancelButton handleClick={handleCancel} />
					<OkButton handleClick={handleSubmit} />
				</ModalWrapper>
			);
		case modalTypes.completed:
			return (
				<ModalWrapper view={view} modalText={modalText} handleCancel={handleSubmit} >
					<OkButton handleClick={handleSubmit} />
				</ModalWrapper>
			);
		case modalTypes.childOkCancel:
			return (
				<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={view}>
					<BtnWrapper $justify="flex-end">
						<ButtonClose onClick={handleCancel} />
					</BtnWrapper>
					<ModalText $align="center">
						{children && children}
						{ChildView && <ChildView />}
					</ModalText>
					<BtnWrapper $gap="10px">
						<Button text="취소" theme="line" size="large" width="100%" handleClick={handleCancel} />
						<Button
							text="확인"
							theme="primary"
							type="submit"
							size="large"
							width="100%"
							handleClick={handleSubmit}
						/>
					</BtnWrapper>
				</Modal>
			);
		default:
			return null;
	}
}

export default DynamicModal;