import React from 'react';
import {
  TableContainer,
  Table,
  TableCaption,
  TableHead,
  TableRow,
  TableBody,
  TableHeadCell,
  TableDataCell,
} from '@digigov/ui/content/Table';

const data = {
  title: 'Πίνακας προϊόντων',
  labels: {
    product: 'Προϊόν',
    price: 'Χοντρική Τιμή',
    retailPrice: 'Λιανική Τιμή',
    stock: 'Στοκ',
    date: 'Ημερομηνία',
  },
  content: [
    {
      product: 'Τυρί',
      price: '2.9€',
      retailPrice: '4.9€',
      stock: 20,
      date: '2013-04-01',
    },
    {
      product: 'Γάλα',
      price: '1.1€',
      retailPrice: '1.9€',
      stock: 32,
      date: '2013-01-01',
    },
    {
      product: 'Γιαούρτι',
      price: '1.6€',
      retailPrice: '2.4€',
      stock: 12,
      date: '2002-04-12',
    },
    {
      product: 'Κρέμα',
      price: '2.9€',
      retailPrice: '3.9€',
      stock: 8,
      date: '2011-12-12',
    },
    {
      product: 'Βούτυρο',
      price: '0.4€',
      retailPrice: '0.9€',
      stock: 99,
      date: '2019-06-01',
    },
    {
      product: 'Καφές',
      price: '1.5€',
      retailPrice: '2.9€',
      stock: 86,
      date: '2023-02-11',
    },
    {
      product: 'Ψωμί',
      price: '0.3€',
      retailPrice: '0.6€',
      stock: 12,
      date: '2000-12-12',
    },
  ],
};

export const Full = (_: any) => {
  return (
    <TableContainer>
      <Table
        variant="zebra"
        headerVariant="dark"
        verticalBorders
        dense
        stacked="sm"
      >
        {data && (
          <>
            <TableCaption>{data.title}</TableCaption>
            <TableHead>
              <TableRow>
                {data.labels && (
                  <>
                    <TableHeadCell>{data.labels.product}</TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.price}
                    </TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.retailPrice}
                    </TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.stock}
                    </TableHeadCell>
                    <TableHeadCell dataType="numeric">
                      {data.labels.date}
                    </TableHeadCell>
                  </>
                )}
              </TableRow>
            </TableHead>
            <TableBody>
              {data.content &&
                data.content.map((item, index) => (
                  <TableRow key={index}>
                    <TableHeadCell data-label={data.labels.product}>
                      {item.product}
                    </TableHeadCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.price}
                    >
                      {item.price}
                    </TableDataCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.retailPrice}
                    >
                      {item.retailPrice}
                    </TableDataCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.stock}
                    >
                      {item.stock}
                    </TableDataCell>
                    <TableDataCell
                      dataType="numeric"
                      data-label={data.labels.date}
                    >
                      {item.date}
                    </TableDataCell>
                  </TableRow>
                ))}
            </TableBody>
          </>
        )}
      </Table>
    </TableContainer>
  );
};
export default Full;