import React, {useState} from "react";
import {Editor} from "react-draft-wysiwyg";
import Draft from "draft-js";
import {Stack, Text} from "@chakra-ui/react";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function TextBox(props: any) {
    const {value, OnChange} = props;

    var EditorState = Draft.EditorState;
    var ContentState = Draft.ContentState;
    const [editorState, setEditorState] = useState(() =>
        EditorState.createWithContent(ContentState.createFromText(value))
    );

    function onFieldChange(editorState: any) {
        setEditorState(editorState);
        props.OnChange(editorState.getCurrentContent().getPlainText());
    }


    return (
        <Stack w="100%" spacing={"12px"}>
            <Text
                fontFamily="MaisonBook"
                color="#9FA2B4"
                fontSize="12px"
                fontStyle="normal"
                fontWeight="400"
                lineHeight="16px"
                letterSpacing="0.20000001192092896px"
                textAlign="left"
            >
                Content
            </Text>

            <div
                style={{
                    border: "1px solid #DFE0EB",
                    backgroundColor: "white",
                    borderRadius: "8px",
                    padding: "2px",
                    minHeight: "308px",
                    maxWidth: "545px",
                }}
            >
                <Editor
                    editorState={editorState}
                    onEditorStateChange={onFieldChange}

                />
            </div>
        </Stack>
    );
}