'use client';

import {
  Pagination,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
  Tooltip,
} from '@nextui-org/react';
import Link from 'next/link';
import React, { useMemo, useState } from 'react';

import type { getDiagramsPaths } from '../utils/getDiagrams';
import { EyeIcon } from './eyeIcon';

type ProcessModelListProps = {
  diagramsPaths: Awaited<ReturnType<typeof getDiagramsPaths>>;
};

export default function ProcessModelList(props: ProcessModelListProps) {
  const [page, setPage] = useState(1);
  const rowsPerPage = 5;

  const pages = Math.ceil(props.diagramsPaths.length / rowsPerPage);

  const items = useMemo(() => {
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;

    return props.diagramsPaths.slice(start, end);
  }, [page, props.diagramsPaths]);

  return (
    <Table
      style={{ height: '225px' }}
      bottomContent={
        <div className="flex w-full justify-center">
          <Pagination
            isCompact
            showControls
            color="primary"
            page={page}
            total={pages}
            onChange={(page) => setPage(page)}
          />
        </div>
      }
    >
      <TableHeader>
        <TableColumn className="text-xl">Prozessmodelle</TableColumn>
        <TableColumn className="w-0 pl-0"> </TableColumn>
      </TableHeader>
      <TableBody emptyContent={'No process models to display.'}>
        {items.map((diagram) => (
          <TableRow key={diagram.publicPath} className="flex justify-between rounded-md hover:backdrop-brightness-75">
            <TableCell>{diagram.name}</TableCell>
            <TableCell>
              <div>
                <Tooltip content="View">
                  <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
                    <Link href={`/${diagram.publicPath}`}>
                      <EyeIcon />
                    </Link>
                  </span>
                </Tooltip>
              </div>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}