import { MdWarning } from 'react-icons/md';
import React, { useState } from 'react';
import { ModalLayout, ModalBody, ModalHeader, ModalFooter, Button, Typography, TextInput } from '@strapi/design-system';

import * as S from './styles';

const AlertNode = (props: any) => {
	const [isVisible, setIsVisible] = useState(false);
	const [title, setTitle] = useState(props.node.attrs.title || '');

	return (
		<>
			{isVisible && (
				<ModalLayout onClose={() => setIsVisible((prev) => !prev)} labelledBy="title">
					<ModalHeader>
						<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
							Titel
						</Typography>
					</ModalHeader>
					<ModalBody>
						<TextInput aria-label="title" name="title" onChange={(e: any) => setTitle(e.target.value)} value={title} />
					</ModalBody>
					<ModalFooter
						endActions={
							<Button
								onClick={() => {
									props.updateAttributes({
										title
									});
									setIsVisible(!isVisible);
								}}
							>
								Update
							</Button>
						}
					/>
				</ModalLayout>
			)}
			<S.AlertNode data-drag-handle style={{ background: props.node.attrs.color || '#808080' }}>
				<S.Title className="label" contentEditable={false} onClick={() => setIsVisible(true)}>
					<MdWarning />
					{props.node.attrs.title}
				</S.Title>
				<S.Body />
			</S.AlertNode>
		</>
	);
};

export { AlertNode };