import React, {useMemo, useRef} from 'react'
import {FormControl, FormLabel} from '@chakra-ui/react'
import JoditEditor from "jodit-react";

interface Props {
    label: string
    textField: string
    field: string
    bg: string
    handleSystemRequirements: any
    rows: number
}

const SystemRequirementsTextareaInput = ({label, textField, field, handleSystemRequirements}: Props) => {
    const arrText = textField.split('.')
    const editor = useRef(null);

    const config = useMemo(() =>
            ({
                readonly: false, // all options from https://xdsoft.net/jodit/doc/,
                theme: 'dark',
            }),
        []
    );

    return (
        <FormControl mb="3">
            <FormLabel>{label}</FormLabel>
            <JoditEditor
                ref={editor}
                value={field}
                config={config}
                onChange={(value) => {
                    handleSystemRequirements(arrText[1], arrText[2], value)
                }}
            />
        </FormControl>
    )
}

export default SystemRequirementsTextareaInput