import { useState } from 'react'
import dynamic from 'next/dynamic'
import { complex } from '../../utils/sunEditorConfig'
import api from '../../utils/api'
import FunctionArticle from '../FunctionPage/FunctionArticle'
import 'notyf/notyf.min.css'
import '../../public/css/suneditor.min.css'

const SunEditor = dynamic(
  () => import('suneditor-react'),
  { ssr: false }
)

const EditArticleFunction = (props) => {
  const [htmlContent, setHtmlContent] = useState('')

  const handleEditorChange = (content) => {
    setHtmlContent(content)
  }

  const handleSave = async (content) => {
    let Notyf
    if (typeof window !== 'undefined') {
      Notyf = require('notyf')
    }
    const notyf = new Notyf.Notyf({
      duration: 5000
    })
    try {
      await api.put(`/admin/functions/article/${props.functionInfo.id}`, { article: content }, { headers: { Authorization: props.user.token } })
      notyf.success('Sauvegardé!')
    } catch {
      notyf.error('Erreur!')
    }
  }

  return (
    <div className='container-fluid'>
      <SunEditor setContents={props.functionInfo.article} lang='fr' onChange={handleEditorChange} setOptions={{ buttonList: complex, callBackSave: handleSave }} />
      <FunctionArticle article={htmlContent} />
    </div>
  )
}

export default EditArticleFunction