import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'
import Head from 'next/head'

import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'
import NewsEntry from '../components/newsEntry'
import Composer from '../components/composer'

import styles from './index.module.css'
import constants from '../constants.json'

const forumPostPerPage = 2
const frontpageForumName = 'frontpage'

function fetchForum(from) {
  return new Promise((resolve) => {
    fetch(
      `${
        constants.apiUrl
      }forumEntries?forumName=${frontpageForumName}&getContent=true${
        from ? `&from=${from}` : ''
      }&count=${forumPostPerPage}`,
      {
        credentials: 'include',
      }
    )
      .then((resp) => {
        return resp.json()
      })
      .then((res) => {
        resolve(res)
      })
  })
}

function addPost(title, content) {
  return new Promise((resolve) => {
    fetch(constants.apiUrl + 'addPost', {
      method: 'POST',
      credentials: 'include',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        forumName: frontpageForumName,
        title: title,
        content: content,
      }),
    })
      .then((res) => {
        return res.json()
      })
      .then((res) => {
        resolve(res)
      })
  })
}

function postFeedback(content, file) {
  return new Promise((resolve) => {
    const promises = [
      fetch(constants.apiUrl + 'postfeedback', {
        method: 'POST',
        credentials: 'include',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          content: content,
        }),
      }).then((res) => {
        return res.json()
      }),
    ]

    if (file) {
      const formData = new FormData() // eslint-disable-line
      formData.append('file', file)

      promises.push(
        fetch(constants.apiUrl + 'postfeedbackfile', {
          method: 'POST',
          credentials: 'include',
          headers: {
            Accept: 'application/json',
          },
          body: formData,
        }).then((res) => {
          return res.json()
        })
      )
    }

    Promise.all(promises).then((res) => {
      resolve(res)
    })
  })
}

function updateForumPost(forum, postKey, postData) {
  return Object.keys(forum).reduce((acc, key) => {
    const entry = forum[key]
    if (key === postKey) {
      acc = {
        ...acc,
        [key]: postData,
      }
    } else {
      acc = {
        ...acc,
        [key]: entry,
      }
    }
    return acc
  }, {})
}

export default function Index({ globalData }) {
  const userId = globalData.userId
  const motd = globalData.motd
  const [news, setNews] = useState(null)
  const [nextEntryKey, setNextEntryKey] = useState()

  useEffect(() => {
    fetchForum().then((res) => {
      const { entries, nextKey } = res
      setNextEntryKey(nextKey)
      setNews(entries)
    })
  }, [])

  const renderNews = () => {
    if (news) {
      let newsItems = Object.keys(news).map((postKey) => {
        let newsEntryData = news[postKey]
        return (
          <NewsEntry
            onPostDelete={() => {
              fetch(constants.apiUrl + 'rmPost', {
                method: 'POST',
                credentials: 'include',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  forumName: frontpageForumName,
                  postKey: postKey,
                }),
              })
                .then((res) => {
                  return res.json()
                })
                .then((res) => {
                  const { success, msg } = res
                  if (success) {
                    setNews(
                      Object.keys(news).reduce((acc, key) => {
                        const entry = news[key]
                        if (key !== postKey) {
                          acc = {
                            ...acc,
                            [key]: entry,
                          }
                        }
                        return acc
                      }, {})
                    )
                  } else {
                    alert(msg)
                  }
                })
            }}
            onNewsReact={({ reaction, isDelete }) => {
              fetch(constants.apiUrl + 'react', {
                method: 'POST',
                credentials: 'include',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  reaction: reaction,
                  postKey: postKey,
                  isDelete: isDelete,
                  forumName: frontpageForumName,
                }),
              })
                .then((res) => {
                  return res.json()
                })
                .then((res) => {
                  setNews(res.news)
                })
            }}
            onCommentReact={({ path, reaction, isDelete }) => {
              fetch(constants.apiUrl + 'react', {
                method: 'POST',
                credentials: 'include',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  type: 'reaction',
                  postKey: postKey,
                  path: path,
                  reaction: reaction,
                  isDelete: isDelete,
                  forumName: frontpageForumName,
                }),
              })
                .then((res) => {
                  return res.json()
                })
                .then((res) => {
                  const { success, postData, msg } = res
                  if (success) {
                    setNews(updateForumPost(news, postKey, postData))
                  } else {
                    alert(msg)
                  }
                })
            }}
            onDelete={(path) => {
              fetch(constants.apiUrl + 'comment', {
                method: 'POST',
                credentials: 'include',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  type: 'delete',
                  path: path,
                  postKey: postKey,
                  forumName: frontpageForumName,
                }),
              })
                .then((res) => {
                  return res.json()
                })
                .then((res) => {
                  const { success, postData, msg } = res
                  if (success) {
                    setNews(updateForumPost(news, postKey, postData))
                  } else {
                    alert(msg)
                  }
                })
            }}
            onComment={(path, content) => {
              fetch(constants.apiUrl + 'comment', {
                method: 'POST',
                credentials: 'include',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  type: 'add',
                  path: path,
                  content: content,
                  postKey: postKey,
                  forumName: frontpageForumName,
                }),
              })
                .then((res) => {
                  return res.json()
                })
                .then((res) => {
                  const { success, postData, msg } = res
                  if (success) {
                    setNews(updateForumPost(news, postKey, postData))
                  } else {
                    alert(msg)
                  }
                })
            }}
            uid={userId}
            key={postKey}
            newsKey={postKey}
            newsItem={newsEntryData}
          />
        )
      })

      return (
        <div>
          <div className={styles.title}>Fórum/Hírek</div>
          <hr />
          <Composer
            onSubmit={(type, title, content, file) => {
              if (!content) {
                alert('Üres a tartalom!')
                return
              }
              if (type === 'private') {
                postFeedback(content, file).then((res) => {
                  console.log(res)
                  alert('Privát visszajelzés elküldve!')
                })
              } else {
                if (!title) {
                  alert('Üres a téma!')
                  return
                }
                addPost(title, content).then((res) => {
                  const { success, newPostKey, newEntry, msg } = res
                  if (success) {
                    setNews({ [newPostKey]: newEntry, ...news })
                  } else {
                    alert(msg)
                  }
                })
              }
            }}
          />
          <div>{newsItems}</div>
          {nextEntryKey && (
            <div
              className={styles.loadMoreButton}
              onClick={() => {
                fetchForum(nextEntryKey).then((res) => {
                  console.log(res)
                  const { entries, nextKey } = res
                  setNextEntryKey(nextKey)
                  setNews({ ...news, ...entries })
                })
              }}
            >
              Több bejegyzés betöltése
            </div>
          )}
        </div>
      )
    } else {
      return <LoadingIndicator />
    }
  }

  const renderMotd = () => {
    return (
      <div className={styles.motd_body}>
        <div className={styles.title}>MOTD</div>
        {motd ? (
          <div
            className={styles.motd}
            dangerouslySetInnerHTML={{ __html: motd }}
          />
        ) : (
          <div>...</div>
        )}
      </div>
    )
  }

  return (
    <div>
      <Head>
        <title>Qmining | Frylabs.net</title>
      </Head>
      {renderMotd()}
      {/*{userSpecificMotd && renderUserSpecificMotd()} */}
      <Sleep />
      {renderNews()}
    </div>
  )
}