import React from 'react'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import { Grid, InputLabel } from '@material-ui/core'
import { apiUploadFile } from 'app/apis/Functions/Upload.js'

function CKedittorComponents(props) {
    const { title, desc, setDesc, id } = props
    function uploadPlugin(editor) {
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
            return uploadAdapter(loader)
        }
    }
    function uploadAdapter(loader) {
        return {
            upload: () => {
                return new Promise((resolve, reject) => {
                    const body = new FormData()
                    loader.file.then((file) => {
                        body.append('files', file)
                        apiUploadFile(body)
                            .then((res) => {
                                console.log(res.data.data[0].url)
                                resolve({
                                    default: res.data.data[0].url,
                                })
                            })
                            .catch((err) => {
                                reject(err)
                            })
                    })
                })
            },
        }
    }
    return (
        <>
            {
                <Grid item xs={12} sm={12}>
                    <InputLabel style={{ paddingBottom: '5px' }}>
                        {title}
                    </InputLabel>

                    <CKEditor
                        config={{
                            extraPlugins: [uploadPlugin],
                        }}
                        editor={ClassicEditor}
                        data={desc}
                        onReady={(editor) => {
                            id && editor.setData(desc)
                            // You can store the "editor" and use when it is needed.
                        }}
                        onChange={(event, editor) => {
                            const content = editor.getData()
                            setDesc(content)
                        }}
                        onBlur={(event, editor) => {}}
                        onFocus={(event, editor) => {}}
                    />
                </Grid>
            }
        </>
    )
}

export default CKedittorComponents
