import {useState, useEffect} from 'react'
import {useSession} from 'next-auth/client'

import HeadLayout from '../components/head-layout'
import Koneksyon from '../components/soumet/koneksyon'
import Dekoneksyon from '../components/soumet/dekoneksyon'
import EkriTeks from '../components/soumet/ekri-teks'

import {jwennTeksEpiUserId} from '../lib/oki-api'

export default function Soumet() {
  const [session] = useSession()
  const [teksEpiUserId, setTeksEpiUserId] = useState([])

  useEffect(() => {
    if (session && session.user) {
      const {_id} = session.user
      const jwennTeks = async userId => {
        const teks = await jwennTeksEpiUserId(userId)
        setTeksEpiUserId(teks)
      }

      jwennTeks(_id)
    }
  }, [session])

  return (
    <HeadLayout title='Soumèt' tab={3} slug='soumet'>
      {!session && (
        <Koneksyon />
      )}
      {session && session.user && (
        <>
          <Dekoneksyon />
          <EkriTeks session={session} teks={teksEpiUserId} />
        </>
      )}
      {session && !session.user && (
        <Dekoneksyon />
      )}
    </HeadLayout>
  )
}