import React, { useState, useEffect } from 'react'

import LoadingIndicator from '../components/LoadingIndicator.js'

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

export default function Donate(props) {
  const [btcAddress, setBtcAddress] = useState()

  useEffect(() => {
    console.info('Fetching news.json')
    fetch(`${constants.apiUrl}btc/btcaddress`, {
      credentials: 'include',
    })
      .then((resp) => {
        return resp.text()
      })
      .then((data) => {
        setBtcAddress(data)
      })
  }, [])

  if (!btcAddress) {
    return <LoadingIndicator />
  } else {
    return (
      <div className={styles.container}>
        <div className={styles.text}>
          Privacy okokból csak bitcoint lehet adományozni. Ezen az oldalon
          található a bitcoin cím, és a hozzá tartozó QR kód.
        </div>
        <div className={styles.address}>{btcAddress}</div>
        <div>
          <img
            src={`${constants.apiUrl}btc/btcaddress.png`}
            className={styles.qr}
          />
        </div>
      </div>
    )
  }
}