import Head from 'next/head'
import React, { Fragment, ReactElement, useEffect, useState } from 'react'
import { State, Status } from '../@types'
import styles from '../styles/Home.module.css'
import { getData } from '../utils/getData'
import LogoAsset from '../images/logo.svg'
import CheckAsset from '../images/check.svg'

function statusIcon(state: State): ReactElement {
  if (state === State.Up) {
    return <CheckAsset className={styles.check} />
  } else if (state === State.Down) {
    return <>🚨</>
  } else {
    return <>🚧</>
  }
}

function statusStyle(state: State) {
  if (state === State.Down) {
    return styles.down
  } else if (state === State.Warning) {
    return styles.warning
  } else {
    return styles.up
  }
}

export default function HomePage(): ReactElement {
  const [data, setData] = useState<{ [key: string]: Status }>()

  useEffect(() => {
    async function getStatuses() {
      const data = await getData()
      setData(data)
    }
    getStatuses()
  }, [])

  return (
    <div className={styles.container}>
      <Head>
        <title>Ocean Protocol Status</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <header>
        <LogoAsset className={styles.logo} />

        <h1 className={styles.title}>Ocean Status</h1>
        <p className={styles.description}>Current Status of Ocean Components</p>
      </header>

      <main>
        {Object.entries(data || {}).map(([key, value]) => (
          <Fragment key={key}>
            <h2 className={styles.networkName}>{key}</h2>
            <div className={styles.grid}>
              {Object.entries(value)
                .filter(
                  // TODO: Remove this filter if we fix this on API level
                  // Needs a new `components` key under Status response
                  ([key]) =>
                    key !== 'currentBlock' &&
                    key !== 'lastUpdatedOn' &&
                    key !== 'network' &&
                    key !== '_id' &&
                    key !== '__v'
                )
                .map(([key, value]) => (
                  <div
                    key={key}
                    className={`${styles.card} ${statusStyle(
                      // TODO: all component states should be of type Status on API level
                      key === 'market' || key === 'dataFarming'
                        ? value
                        : value.status
                    )}`}
                  >
                    <h2>
                      {statusIcon(
                        key === 'market' || key === 'dataFarming'
                          ? value
                          : value.status
                      )}{' '}
                      {key}
                    </h2>
                    <code className={styles.version}>{value.version}</code>
                  </div>
                ))}
            </div>
          </Fragment>
        ))}
      </main>

      <footer className={styles.footer}></footer>
    </div>
  )
}
