"use client"

import React, { useState } from 'react'
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid } from '@mantine/core'
import Example from './query'
// import { Image as NextImage } from 'next/image'
import NextImage from 'next/image'

import Prawn from "../images/aussietigerprawns.jpg"
// import Prawn from "/aussietigerprawns.jpg"

interface InventoryItem {
  id: number
  name: string
  price: number
  quantity: number
}

async function fetchBlob(url: string) {
  const response = await fetch(url)

  // Here is the significant part 
  // reading the stream as a blob instead of json
  return response.blob()
}

export default function InventoryPage() {
  const theme = useMantineTheme()
  const [items, setItems] = useState<InventoryItem[]>([])
  const [name, setName] = useState('')
  const [price, setPrice] = useState('')
  const [quantity, setQuantity] = useState('')

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length + 1,
        name,
        price: parseFloat(price),
        quantity: parseInt(quantity),
      },
    ])
    setName('')
    setPrice('')
    setQuantity('')
  }

  const [imageSourceUrl, setImageSourceUrl] = React.useState("")

  const downloadImageAndSetSource = async (imageUrl: any) => {
    const image = await fetchBlob(imageUrl)
    setImageSourceUrl(URL.createObjectURL(image))
  }

  return (
    <Box>
      <Container size="md" >
        <Paper >
          <Table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
              </tr>
            </thead>
            <tbody>
              {items.map((item) => (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.price}</td>
                  <td>{item.quantity}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Paper>

        <Flex style={{ marginTop: theme.spacing.md }}>
          <TextInput
            label="Item name"
            placeholder="Enter item name"
            value={name}
            onChange={(event) => setName(event.currentTarget.value)}
          />
          <TextInput
            label="Price"
            placeholder="Enter item price"
            value={price}
            onChange={(event) => setPrice(event.currentTarget.value)}
          />
          <TextInput
            label="Quantity"
            placeholder="Enter item quantity"
            value={quantity}
            onChange={(event) => setQuantity(event.currentTarget.value)}
          />
          <Button onClick={addItem}>Add item</Button>
        </Flex>
      </Container>

      {/* <Grid>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
          <NextImage width={4} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
          <NextImage width={4} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
          <NextImage width={4} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
          <NextImage width={4} src={Prawn} alt="ITEM" />
        </Grid.Col>
      </Grid> */}

      {/* maybe instead, do 4 items on small. And double each time To 8 or 16 */}

      <Grid>
        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
          <NextImage width={150} sizes="(max-width: 768px) 100vw, 33vw" src={Prawn} alt="ITEM" />
          {/* <NextImage width={500} src={Prawn} alt="ITEM" />
          <NextImage width={500} src={Prawn} alt="ITEM" />
          <NextImage width={500} src={Prawn} alt="ITEM" /> */}
        </Grid.Col>
        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
          <NextImage width={150} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
          <NextImage width={150} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
          {/* <NextImage width={500} src={Prawn} alt="ITEM" /> */}
          {/* <img src="../images/aussietigerprawns.jpg" alt="hi"/> */}
        </Grid.Col>
      </Grid>

      <Grid>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
      </Grid>

      <Flex
        id="GRID OF ITEMS"
        mih={50}
        bg="rgba(0, 0, 0, .3)"
        gap="md"
        justify="flex-start"
        align="flex-start"
        direction="column"
        wrap="wrap"
      >
        {/* would fetch the source from axios */}
        {/* <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" />
        <NextImage src={Prawn} alt="ITEM" /> */}
        {/* <Example /> */}

        {/* <Image component={NextImage} src={Prawn} alt="TIGER PRAWNS" /> */}

        {/* from public import everything .jpg */}

        {/* create an Image for each */}

        {/* <NextImage src="cake.jpg" alt="public/cake" /> */}
      </Flex>
    </Box>
  )
}