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

interface Props {
  label: string
  textField: string
  field: string
  bg: string
  handleInputChange: <G extends keyof Data>(name: string, value: Data[G]) => void
  rows: number
}

const TextareaInput = ({ label, textField, field, handleInputChange }: Props) => {
    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) => {
                handleInputChange(textField, value)
            }}
        />
    </FormControl>
  )
}

export default TextareaInput