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

import * as S from './styles';

const StepByStepNode = (props: any) => {
	const [isVisible, setIsVisible] = useState(false);
	const [content, setContent] = useState(props.node.attrs.content || '');

	return (
		<>
			{isVisible && (
				<ModalLayout
					onClose={() => setIsVisible((prev) => !prev)}
					labelledBy="title"
				>
					<ModalHeader>
						<Typography
							fontWeight="bold"
							textColor="neutral800"
							as="h2"
							id="title"
						>
							Content
						</Typography>
					</ModalHeader>
					<ModalBody>
						<TextInput
							aria-label="Content"
							name="content"
							onChange={(e: any) => setContent(e.target.value)}
							value={content}
						/>
					</ModalBody>
					<ModalFooter
						endActions={
							<Button
								onClick={() => {
									props.updateAttributes({
										content,
									});
									setIsVisible(!isVisible);
								}}
							>
								Update
							</Button>
						}
					/>
				</ModalLayout>
			)}
			<S.StepByStepNode data-drag-handle>
				<S.Header>
					<S.Number onClick={() => setIsVisible(true)}>
						{props.node.attrs.content}
					</S.Number>
					<h3>
						<S.Body />
					</h3>
				</S.Header>
			</S.StepByStepNode>
		</>
	);
};

export { StepByStepNode };