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

const Scan = (props) => {
    const [item, setItem] = useState()
    const [data, setData] = useState('')

    useEffect(() => {
        axios.get('https://robotocafedev.herokuapp.com/server' + '/item/'+ props.match.params.item)
        .then(res => {
            setItem(res.data)
            setData(`data:${res.data.image.contentType};base64,` + ArrayBufferToBase64(res.data.image.data.data))
        }) 
    }, [])
    const Item = item ? (
        <div className="data_content">
            <div className="row m-0 col-12 text-center scan">

                <h1>You have selected <span>{item.name}</span></h1>
                <h2>Total Amount: ₹{item.price}</h2>
                <div className="col-12">
                    <div className="qr_box">
                        <a href="payment_success.html"><img src={data} alt="image here"/></a>
                    </div>
                </div>
                <h4>You can use following UPI apps for payment</h4>

                <div className="col-12">
                    <div className="upi_box">
                        <img src="/images/phone_pe.png" />
                    </div>
                    <div className="upi_box">
                        <img src="/images/google_pay.png" />
                    </div>
                    <div className="upi_box">
                        <img src="/images/paytm.png" />
                    </div>
                    <div className="upi_box">
                        <img src="/images/bhim.png" />
                    </div>
                </div>

            </div>
        </div>) : (<div>No item found</div>)
    return (
        <section className="inner_bg">
            <div className="navbar_mobile">
                <Link to={'/'}><span className="backarrow"><img src="/images/rounded_backarrow.png" /></span></Link>
                <p>Scan</p>
            </div>
                {Item}
        </section>
    )
}

export default Scan