import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import ArrayBufferToBase64 from '../Util/ImageUtil'


const HomePage = () => {
    const [categories, setCategories] = useState([])
    useEffect(() => {
      axios.get('https://robotocafedev.herokuapp.com/server/categories')
      .then(res => {
        setCategories(res.data)
      })
    }, [])
    const Cats = !categories.length ? (<div><img src="./images/loadiner_animation.gif" alt="loading gif"/></div>) :

                    (categories.map((cat, ind) => {
                      const img = ArrayBufferToBase64(cat.image.data.data)
                      const data = `data:${cat.image.contentType};base64,` 
                      return(
                        <div className="col-6 category_box" key={ind}>
                        <Link to={'/' + cat.name}>
                            <div className="column_box text-center">
                                <img src={data + img} alt="Category"  className="category-image" width="90" chieght="90"/>
                                <p>{cat.name}</p>
                            </div>
                            </Link>
                        </div>
                    )}))
    return (
        <section className="h-100 landing_bg">
            <div className="logo text-center">
                <img src="images/logo.png" className="img-fluid" alt="logo"/>
                <p>Select your preference and place order</p>
            </div>
            <div className="">
                <div className="row m-0 h-100 category_height" >
                {Cats}
                </div>
            </div>
        </section>
    )
}

export default HomePage