import { Button, DataGrid } from '@gouvfr-lasuite/cunningham-react';
import { useRouter as useNavigate } from 'next/navigation';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { Box, Text } from '@/components';
import { TeamsOrdering, useTeams } from '@/features/teams/team-management';

interface TeamsListViewProps {
  querySearch: string;
}

export function TeamsListView({ querySearch }: TeamsListViewProps) {
  const { t } = useTranslation();
  const router = useNavigate();
  const { data, isLoading } = useTeams({
    ordering: TeamsOrdering.BY_CREATED_ON_DESC,
  });
  const teams = React.useMemo(() => data || [], [data]);

  const filteredTeams = React.useMemo(() => {
    if (!querySearch) {
      return teams;
    }
    const lower = querySearch.toLowerCase();
    return teams.filter((team) => team.name.toLowerCase().includes(lower));
  }, [teams, querySearch]);

  return (
    <div role="listbox">
      {filteredTeams && filteredTeams.length ? (
        <DataGrid
          aria-label="listboxTeams"
          rows={filteredTeams}
          columns={[
            {
              field: 'name',
              headerName: t('Team'),
              enableSorting: true,
            },
            {
              id: 'members',
              headerName: t('Member count'),
              enableSorting: false,
              renderCell: ({ row }) => row.accesses.length,
            },
            {
              id: 'actions',
              renderCell: ({ row }) => (
                <Button
                  size="small"
                  color="brand"
                  variant="secondary"
                  iconPosition="right"
                  icon={<span className="material-icons">arrow_forward</span>}
                  onClick={() => router.push(`/teams/${row.id}`)}
                  aria-label={t('View team details')}
                >
                  {t('Open')}
                </Button>
              ),
            },
          ]}
          isLoading={isLoading}
        />
      ) : null}
      {(!filteredTeams || !filteredTeams.length) && (
        <Box $align="center" $margin={{ all: 'auto' }}>
          <Text $size="small">{t('No teams exist.')}</Text>
        </Box>
      )}
    </div>
  );
}
