import React, { FC, useEffect, useState } from "react"
import { useHistory, useParams } from "react-router-dom"
import SimpleLayout from "../../component/layout/SimpleLayout"
import { useRequestEditParagraph, 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 Note from "../../models/Note"
import Paragraph from "../../models/Paragraph"
import CommandPalette from "./CommandPalette"


const EditNoteParagraphPage: FC = () => {
  const params = useParams() as any
  const [noteID, paragraphID] = [parseInt(params.id, 10), parseInt(params.paragraphID, 10)]
  const [fetching, note, paragraph, referencedArticles, referencedWebURLs] = useNoteAndParagraph(noteID, paragraphID)
  const [submitFetching, submit] = useSubmit(noteID, paragraphID)

  const title = note ? note.title : ''

  return (
    <SimpleLayout loading={fetching}>
      <InputField disabled value={title}/>
      {
        paragraph && (
          <NoteEditor
            content={paragraph.content}
            referenceArticles={referencedArticles}
            referenceWebURLs={referencedWebURLs}
            onSubmit={submit}
            fetching={submitFetching}
          />
        )
      }
      <CommandPalette />
    </SimpleLayout>
  )
}

const useNoteAndParagraph = (noteID: number, paragraphID: number): [
  boolean,
  Note | null,
  Paragraph | null,
  Article[],
  string[],
] => {
  const [fetching, getNote, note, articles] = useRequestGetNote()
  const [paragraph, setParagraph] = useState(null as Paragraph | null)
  const [referencedArticles, setReferencedArticles] = useState([] as Article[])
  const [referencedWebURLs, setReferencedWebURLs] = useState([] as string[])
  const history = useHistory()

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

  useEffect(() => {
    if (!note) {
      return
    }

    const paragraph = note!.paragraphs.find(p => p.id === paragraphID)
    if (!paragraph) {
      toast.error('invalid paragraph id')
      setTimeout(() => history.goBack(), 3000)
      return
    }

    const referencedArticleIDs = paragraph.referenceArticles.map(a => a.articleID)
    const referencedWebURLs = paragraph.referenceWebs.map(w => w.url)
    const referencedArticles = articles.filter(a => referencedArticleIDs.includes(a.id))

    setParagraph(paragraph)
    setReferencedArticles(referencedArticles)
    setReferencedWebURLs(referencedWebURLs)
  }, [note, articles, history, paragraphID])

  return [fetching, note, paragraph, referencedArticles, referencedWebURLs]
}

const useSubmit = (noteID: number, paragraphID: number): [
  boolean,
  (content: string, referencedArticles: Article[], referencedWebURLs: string[]) => void,
] => {
  const [fetching, editParagraph] = useRequestEditParagraph()
  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)
    editParagraph(noteID, paragraphID, content, articleIDs, referenceWebURLs)
      .then(() => history.push(`/notes/${noteID}`))
  }
  return [fetching, submit]
}

export default EditNoteParagraphPage