EcrituresNumeriques / stylo / 17938969292

import React, { useEffect, useState } from 'react'

import { useTranslation } from 'react-i18next'

import { useSearchParams } from 'react-router'

import Toggle from '../molecules/Toggle.jsx'

import CollaborativeEditorActiveVersion from './CollaborativeEditorActiveVersion.jsx'

import CollaborativeEditorWriters from './CollaborativeEditorWriters.jsx'

import styles from './CollaborativeEditorArticleHeader.module.scss'

export default function CollaborativeEditorArticleHeader({

  articleTitle,

  versionId,

}) {

  const { t } = useTranslation()

  const [searchParams, setSearchParams] = useSearchParams()

  const [mode, setMode] = useState('edit')

  useEffect(() => {

    if (mode === 'preview' && searchParams.get('mode') !== 'preview') {

      setSearchParams({ mode: 'preview' })

    } else if (searchParams.get('mode') === 'preview') {

      setSearchParams({})

    }

  }, [mode])

  return (

    <header className={styles.header}>

      <h1 className={styles.title}>{articleTitle}</h1>

      <div className={styles.row}>

        <Toggle

          id="preview-mode"

          checked={mode === 'preview'}

          title={t('article.editor.preview')}

          onChange={(checked) => setMode(checked ? 'preview' : 'edit')}

          {t('article.editor.preview')}

        </Toggle>

        <div className={styles.writers}>

          <CollaborativeEditorWriters />

        </div>

      </div>

      <CollaborativeEditorActiveVersion versionId={versionId} />

    </header>

}