import React from 'react';

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

const labels = {
  name: 'Ονοματεπώνυμο',
  email: 'Email',
  phone: 'Τηλέφωνο',
  role: 'Ρόλος',
  status: 'Κατάσταση',
  actions: 'Ενέργειες',
  at: 'Αριθμός Ταυτότητας',
  zip: 'Ταχυδρομικός Κώδικας',
  address: 'Διεύθυνση',
  city: 'Πόλη',
  country: 'Χώρα',
  active: 'Ενεργός',
  last_login: 'Τελευταία Σύνδεση',
  last_login_agent: 'Τελευταία Σύνδεση Αξεσουάρ',
  last_login_ip: 'Τελευταία Σύνδεση IP',
  afm: 'ΑΦΜ',
};

const data = [
  {
    name: 'Τάκης Τσούκαλος',
    afm: '1111111112',
    role: 'Χειριστής',
    at: '1212121',
    email: 'takis@gov.gr',
    phone: '22222222',
    address: 'Αγία Παρασκευής',
    city: 'Αγία Παρασκευή',
    country: 'Ελλάδα',
    zip: '222233',
    active: 'Ναι',
  },
  {
    name: 'Μάριος Μενεξές',
    afm: '1111111113',
    role: 'Χειριστής',
    at: '1212122',
    email: 'marios@gov.gr',
    phone: '33333333',
    address: 'Χαλανδρίου',
    city: 'Χαλάνδρι',
    country: 'Ελλάδα',
    zip: '222244',
    active: 'Ναι',
  },
  {
    name: 'Καλλιόπη Παπαδοπούλου',
    afm: '1111111114',
    role: 'Διαχειριστής',
    at: '1212123',
    email: 'kalliopi@gov.gr',
    phone: '44444444',
    address: 'Παγκρατίου',
    city: 'Παγκράτι',
    country: 'Ελλάδα',
    zip: '222255',
    active: 'Ναι',
  },
  {
    name: 'Μαρία Φλούπη',
    afm: '1111111115',
    role: 'Διαχειριστής',
    at: '1212124',
    email: 'maria@gov.gr',
    phone: '55555555',
    address: 'Παγκρατίου',
    city: 'Παγκράτι',
    country: 'Ελλάδα',
    zip: '222255',
    active: 'Όχι',
  },
  {
    name: 'Ηλέκτρα Αποστόλου',
    afm: '1111111116',
    role: 'Χειριστής',
    at: '1212125',
    email: 'ilektra@gov.gr',
    phone: '66666666',
    address: 'Καλλιθέας',
    city: 'Καλλιθέα',
    country: 'Ελλάδα',
    zip: '222266',
    active: 'Όχι',
  },
];

export const Dense = (_: any) => {
  return (
    <TableContainer border>
      <Table dense>
        <TableCaption>Χρήστες</TableCaption>
        <TableHead>
          <TableRow>
            {Object.keys(data[0]).map((key) => (
              <TableHeadCell key={key}>{labels[key]}</TableHeadCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {data &&
            data.map((dt, index) => {
              return (
                <TableRow key={index}>
                  {Object.keys(dt).map((key) => (
                    <TableDataCell key={key}>{dt[key]}</TableDataCell>
                  ))}
                </TableRow>
              );
            })}
        </TableBody>
      </Table>
    </TableContainer>
  );
};
export default Dense;