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

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

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

const links = {
  install: {
    href: '/install',
    text: 'Install',
  },
  irc: {
    href: '/irc',
    text: 'IRC chat',
  },
}

function fetchNews() {
  return new Promise((resolve) => {
    fetch(`${constants.apiUrl}news.json`, {
      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({
        title: title,
        content: content,
      }),
    })
      .then((res) => {
        return res.json()
      })
      .then((res) => {
        resolve(res)
      })
  })
}

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

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

      fetch(constants.apiUrl + 'postfeedbackfile', {
        method: 'POST',
        credentials: 'include',
        headers: {
          Accept: 'application/json',
        },
        body: formData,
      })
        .then((res) => {
          return res.json()
        })
        .then((fileres) => {
          postText(file).then((textres) => {
            resolve({ fileres, textres })
          })
        })
    } else {
      postText().then((res) => {
        resolve(res)
      })
    }
  })
}

export default function Index({ globalData }) {
  const userId = globalData.userId
  const motd = globalData.motd
  const [news, setNews] = useState(null)
  const [allQrSelector, setAllQrSelector] = useState(null)
  // const userSpecificMotd = props.globalData.userSpecificMotd

  useEffect(() => {
    console.info('Fetching news.json')
    fetchNews().then((res) => {
      setNews(res)
    })
  }, [])

  const renderNews = () => {
    if (news) {
      let newsItems = Object.keys(news)
        .map((key) => {
          let newsEntryData = news[key]
          return (
            <NewsEntry
              onPostDelete={() => {
                fetch(constants.apiUrl + 'rmPost', {
                  method: 'POST',
                  credentials: 'include',
                  headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({
                    newsKey: key,
                  }),
                })
                  .then((res) => {
                    return res.json()
                  })
                  .then((res) => {
                    if (res.status === 'fail') {
                      alert(res.msg)
                    } else {
                      setNews(res.news)
                    }
                  })
              }}
              onNewsReact={({ reaction, isDelete }) => {
                fetch(constants.apiUrl + 'react', {
                  method: 'POST',
                  credentials: 'include',
                  headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({
                    reaction: reaction,
                    newsKey: key,
                    isDelete: isDelete,
                  }),
                })
                  .then((res) => {
                    return res.json()
                  })
                  .then((res) => {
                    console.log(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',
                    newsKey: key,
                    path: path,
                    reaction: reaction,
                    isDelete: isDelete,
                  }),
                })
                  .then((res) => {
                    return res.json()
                  })
                  .then((res) => {
                    setNews(res.news)
                  })
              }}
              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,
                    newsKey: key,
                  }),
                })
                  .then((res) => {
                    return res.json()
                  })
                  .then((res) => {
                    if (res.status === 'fail') {
                      alert(res.msg)
                    } else {
                      setNews(res.news)
                    }
                  })
              }}
              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,
                    newsKey: key,
                  }),
                })
                  .then((res) => {
                    return res.json()
                  })
                  .then((res) => {
                    setNews(res.news)
                  })
              }}
              uid={userId}
              key={key}
              newsKey={key}
              newsItem={newsEntryData}
            />
          )
        })
        .reverse()

      return (
        <div>
          <div className={styles.title}>Forum</div>
          <hr />
          <Composer
            onSubmit={(type, title, content, file) => {
              if (!content) {
                alert('Üres a tartalom!')
                return
              }
              console.log(type, title, content, file)
              if (type === 'private') {
                postFeedback(content, file).then(
                  (/* { fileres, textres } */) => {
                    alert('Privát visszajelzés elküldve!')
                  }
                )
              } else {
                if (!title) {
                  alert('Üres a téma!')
                  return
                }
                addPost(title, content).then((res) => {
                  setNews(res.news)
                })
              }
            }}
          />
          <hr />
          <div>{newsItems}</div>
        </div>
      )
    } else {
      return <LoadingIndicator />
    }
  }

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

  // const renderUserSpecificMotd = () => {
  //   return (
  //     <div>
  //       <hr />
  //       <div className={styles.subtitle}>Üzenet admintól:</div>
  //       {userSpecificMotd ? (
  //         <div
  //           className={styles.motd}
  //           dangerouslySetInnerHTML={{ __html: userSpecificMotd.msg }}
  //         />
  //       ) : (
  //         <div>...</div>
  //       )}
  //     </div>
  //   )
  // }

  const renderDbSelector = () => {
    if (allQrSelector) {
      return (
        <DbSelector
          text={`Válaszd ki melyik adatbázist szeretnéd letölteni (${allQrSelector}):`}
          showAll={allQrSelector === 'txt'}
          closeClick={() => {
            setAllQrSelector(null)
          }}
          onDbSelect={(selectedDb) => {
            if (allQrSelector === 'txt') {
              if (selectedDb === 'all') {
                window.open(`${constants.apiUrl}allqr.txt`, '_blank')
              } else {
                window.open(
                  `${constants.apiUrl}allqr.txt?db=${selectedDb.name}`,
                  '_blank'
                )
              }
            } else if (allQrSelector === 'json') {
              window.open(`${constants.apiUrl}${selectedDb.path}`, '_blank')
            }
          }}
        />
      )
    } else {
      return null
    }
  }

  return (
    <div>
      <Head>
        <title>Qmining | Frylabs.net</title>
      </Head>
      <div className={styles.buttonContainer}>
        {Object.keys(links).map((key) => {
          let link = links[key]
          return (
            <Link key={key} href={link.href}>
              <a className={styles.button} target="_blank">
                {link.text}
              </a>
            </Link>
          )
        })}
        <a
          onClick={() => {
            setAllQrSelector('txt')
          }}
          className={styles.button}
        >
          {'Összes kérdés TXT'}
        </a>
        <a
          onClick={() => {
            setAllQrSelector('json')
          }}
          className={styles.button}
        >
          {'Összes kérdés JSON'}
        </a>
      </div>
      <hr />
      {renderMotd()}
      {/*{userSpecificMotd && renderUserSpecificMotd()} */}
      <hr />
      <hr />
      <Sleep />
      {renderNews()}
      {renderDbSelector()}
    </div>
  )
}