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

const ViewItems = (props) => {
    const [items, setItems] = useState([])
    const [name, setName] = useState('')

    useEffect(() => {
        axios.get('https://robotocafedev.herokuapp.com/server/items/' + props.match.params.name) 
        .then(data => {
            setItems(data.data)
        })
        setName(props.match.params.name)
    }, [])
    const itemsJS = items.length ? (
        items.map((item, map) =>{
            const data = `data:${item.image.contentType};base64,`  + ArrayBufferToBase64(item.image.data.data) 
            return (
            <div className="col-6 category_box" key={item.name}>
                <Link to={'/' + name + '/' + item.name}>
                    <div className="column_box text-center p-0">
                        <div className="col_box_data">
                            <div className="price_badge">
                                <img src="images/price_badge_bg.png" alt="price-bg"  />
                                <span>₹{item.price}</span>
                            </div>

                            <img src="images/transparent_bg.png" className="trans_bg" alt="transparent-bg"/>
                            <img src={data} alt="Menu Items"/>
                            <p>{item.name}</p>
                        </div>
                    </div>
                </Link>
            </div>
        )}
        )
    ) :(<div>No items here</div>)

    return (
        <section className="inner_bg">
            <div className="navbar_mobile">
                <Link to={"/"}>
                    <span className="backarrow">
                        <img src='images/rounded_backarrow.png' />
                    </span>
                </Link>
                <p>{name}</p>
            </div>
            <div className="data_content">
                <div className="row m-0 col-12 p-0 text-center category_view">
                    <h1>Select What do want</h1>
                    <div className="col-12">
                        <div className="row">
                            {itemsJS}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default ViewItems