// @delay-test-snapshot
import React, { useState } from 'react';
import { CircularProgress, LoaderContainer } from '@digigov/ui/app/Loader';
import {
  TableLoaderBackground,
  TableContainer,
  Table,
  TableCaption,
  TableHead,
  TableRow,
  TableBody,
  TableHeadCell,
  TableDataCell,
  TableNoDataRow,
} from '@digigov/ui/content/Table';
import { Button } from '@digigov/ui/form/Button';

const data = {
  title: 'Χρήστες',
  labels: {
    name: 'Ονοματεπώνυμο',
    role: 'Ρόλος',
    email: 'Email',
  },
  content: [
    {
      name: 'Μάριος Μενεξές',
      role: 'Χειριστής',
      email: 'marios@mail.com',
    },
    {
      name: 'Καλλιόπη Παπαδοπούλου',
      role: 'Χειριστής',
      email: 'kalliopi@mail.com',
    },
    {
      name: 'Μαρία Φλούπη',
      role: 'Διαχειριστής',
      email: 'maria@mail.com',
    },
  ],
};

export const WithLoader = (_: any) => {
  const [tableData, setTableData] = useState<any | null>();
  const [loading, setLoading] = useState(false);
  setTimeout(() => {
    setTableData(data);
  }, 2000);

  return (
    <>
      <TableContainer>
        {!tableData ? (
          <LoaderContainer>
            <CircularProgress />
          </LoaderContainer>
        ) : (
          <Table>
            {tableData && (
              <>
                <TableCaption>{tableData.title}</TableCaption>
                <TableHead>
                  <TableRow>
                    {tableData.labels &&
                      Object.keys(tableData.labels).map((key) => (
                        <TableHeadCell key={key}>
                          {tableData.labels[key]}
                        </TableHeadCell>
                      ))}
                  </TableRow>
                </TableHead>
                <TableBody>
                  {loading === true && (
                    <TableLoaderBackground>
                      <LoaderContainer>
                        <CircularProgress />
                      </LoaderContainer>
                    </TableLoaderBackground>
                  )}
                  {tableData.content && tableData.content.length > 0 ? (
                    tableData.content.map((item, index) => {
                      return (
                        <TableRow key={index}>
                          <TableDataCell data-label={tableData.labels.name}>
                            {item.name}
                          </TableDataCell>
                          <TableDataCell data-label={tableData.labels.role}>
                            {item.role}
                          </TableDataCell>
                          <TableDataCell data-label={tableData.labels.email}>
                            {item.email}
                          </TableDataCell>
                        </TableRow>
                      );
                    })
                  ) : (
                    <TableNoDataRow>No data</TableNoDataRow>
                  )}
                </TableBody>
              </>
            )}
          </Table>
        )}
      </TableContainer>

      <Button
        color="secondary"
        onClick={() => {
          setLoading(!loading);
        }}
      >
        {loading ? 'Απόκρυψη ' : 'Εμφάνιση '}
        φόρτωσης
      </Button>
    </>
  );
};
export default WithLoader;