import React from 'react';

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

import { TableFloatingScroll } from '@digigov/ui/content/Table/TableFloatingScroll';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
} from '@digigov/ui/navigation/Dropdown';
import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';

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 = new Array(20).fill({
  name: 'Τάκης Τσούκαλος',
  afm: '1111111114',
  role: 'Χειριστής',
  at: '1212121',
  email: 'myhomeemail@gov.gr',
  phone: '22222222',
  address: 'Αγία Παρασκευής',
  city: 'Αγία Παρασκευή',
  country: 'Ελλάδα',
  zip: '222233',
  active: 'Ναι',
  last_login: '12/12/12',
  last_login_ip: '0.0.0.0',
  last_login_agent: 'Firefox',
});

export const WithFloatingScroll = (_: any) => {
  return (
    <>
      <TableFloatingScroll>
        <Table>
          <TableHead>
            <TableRow>
              {Object.keys(data[0]).map((key) => (
                <TableHeadCell key={key}>{labels[key]}</TableHeadCell>
              ))}
              <TableHeadCell>Ενέργειες</TableHeadCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data &&
              data.map((dt, index) => {
                return (
                  <TableRow key={index}>
                    {Object.keys(dt).map((key) => (
                      <TableDataCell key={key}>{dt[key]}</TableDataCell>
                    ))}
                    <TableDataCell>
                      <Dropdown float align="right" placement="bottom">
                        <DropdownButton variant="link">
                          Ενέργειες
                        </DropdownButton>
                        <DropdownContent>
                          <NavList layout="vertical">
                            <NavListItemAction href="#">
                              Επεξεργασία
                            </NavListItemAction>
                            <NavListItemAction href="#">
                              Διαγραφή
                            </NavListItemAction>
                          </NavList>
                        </DropdownContent>
                      </Dropdown>
                    </TableDataCell>
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableFloatingScroll>
    </>
  );
};
export default WithFloatingScroll;