import { FieldProps } from "formik";

// @ts-ignore
import { CKEditor } from '@ckeditor/ckeditor5-react';
// @ts-ignore
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { FormControl, FormControlLabel, FormControlProps, FormLabel, TextFieldProps } from "@material-ui/core";
import React from "react";

export type CKEditorFieldProps = FieldProps & FormControlProps & { label?: string };

export function CKEditorField({ field, form, error, label, ...props }: CKEditorFieldProps) {
    const handleChange = (_: unknown, editor: any) => {
        const data = editor.getData();
        form.setFieldValue(field.name, data);
        form.setFieldTouched(field.name);
    }

    return <FormControl { ...props }>
        <FormLabel style={{ marginBottom: "0.5rem" }}>{ label }</FormLabel>
        <CKEditor data={ field.value } editor={ ClassicEditor } onChange={ handleChange }/>
    </FormControl>
}