import React, { FC, useEffect } from "react"
import { useHistory, useParams } from "react-router-dom"
import SimpleLayout from "../../component/layout/SimpleLayout"
import { useRequestCreateParagraph, useRequestGetNote } from "../../apis/NoteApi"
import NoteEditor from "../../component/note/editor/NoteEditor"
import Article from "../../models/Article"
import { toast } from "react-hot-toast"
import { InputField } from "@kiwicom/orbit-components"
import CommandPalette from "./CommandPalette"


const NewNoteParagraphPage: FC = () => {
  const {id: noteID} = useParams() as any
  const [loadFetching, getNote, note ] = useRequestGetNote()
  const [submitFetching, submit] = useSubmit(noteID)

  useEffect(() => {
    getNote(noteID)
  }, [ noteID, getNote ])

  return (
    <SimpleLayout loading={loadFetching}>
      <InputField disabled value={note?.title || ''}/>
      <NoteEditor
        content=""
        referenceArticles={[]}
        referenceWebURLs={[]}
        onSubmit={submit}
        fetching={submitFetching}
      />
      <CommandPalette />
    </SimpleLayout>
  )
}

const useSubmit = (noteID: number): [
  boolean,
  (content: string, referencedArticles: Article[], referenceWebURLs: string[]) => void,
] => {
  const [fetching, createParagraph] = useRequestCreateParagraph()
  const history = useHistory()

  const submit = (content: string, referencedArticles: Article[], referenceWebURLs: string[]) => {
    if (content.trim().length === 0) {
      toast.error('content required')
      return
    }

    const articleIDs = referencedArticles.map(a => a.id)
    createParagraph(noteID, content, articleIDs, referenceWebURLs)
      .then(note => history.push(`/notes/${noteID}`))
  }

  return [fetching, submit]
}

export default NewNoteParagraphPage