"use client"

import React, { useState } from 'react'
import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid, Space, Divider } from '@mantine/core'
import NextImage from 'next/image'
import Prawn from "../images/aussietigerprawns.jpg"

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

async function fetchBlob(url: string) {
  const response = await fetch(url)
  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> */}

        {/* use a grid */}

        <Flex gap="md" 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 gutter={{ base: 5, xs: 'md', md: 'xl', xl: 'xl' }}>
        <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
          <NextImage width={150} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
          <NextImage width={150} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
          <NextImage width={150} src={Prawn} alt="ITEM" />
        </Grid.Col>
        <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
          <NextImage width={150} src={Prawn} alt="ITEM" />
        </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> */}

      {/* why is there a scroll area on the grid */}
    </Box>
  )
}