import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import { useMessages, useReports } from 'hooks';
import Link from 'next/link';
import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
import ReportsTable from './ReportsTable';

export function ReportsPage() {
  const { formatMessage, labels, messages } = useMessages();
  const {
    reports,
    error,
    isLoading,
    filter,
    handleFilterChange,
    handlePageChange,
    handlePageSizeChange,
  } = useReports();

  const hasData = (reports && reports?.data.length !== 0) || filter;

  return (
    <Page loading={isLoading} error={error}>
      <PageHeader title={formatMessage(labels.reports)}>
        <Link href="/reports/create">
          <Button variant="primary">
            <Icon>
              <Icons.Plus />
            </Icon>
            <Text>{formatMessage(labels.createReport)}</Text>
          </Button>
        </Link>
      </PageHeader>

      {hasData && (
        <ReportsTable
          data={reports}
          showSearch={true}
          showPaging={true}
          onFilterChange={handleFilterChange}
          onPageChange={handlePageChange}
          onPageSizeChange={handlePageSizeChange}
          filterValue={filter}
          showDomain={true}
        />
      )}
      {!hasData && (
        <EmptyPlaceholder message={formatMessage(messages.noReportsConfigured)}></EmptyPlaceholder>
      )}
    </Page>
  );
}

export default ReportsPage;