import { IconInfoCircle, IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuStateCard from '@material-hu/components/composed-components/StateCard';
import HuSearch from '@material-hu/components/design-system/Inputs/Search';

import { type Competency } from 'src/types/competencies';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CompetenciesTable from './CompetenciesTable/CompetenciesTable';

type CompetenciesTabContentProps = {
  competencies: Competency[];
  isEmpty: boolean;
  isFetchingNextPage: boolean;
  tableRowsCount: number;
  onLoadMore: () => void;
  onCreateCompetency: () => void;
  onDeleteCompetency: (competencyId: number) => void;
  onEditCompetency: (competency: Competency) => void;
  onSearchChange: (search: string) => void;
  search: string;
};

const CompetenciesTabContent = (props: CompetenciesTabContentProps) => {
  const {
    competencies,
    isEmpty,
    isFetchingNextPage,
    tableRowsCount,
    onLoadMore,
    onCreateCompetency,
    onDeleteCompetency,
    onEditCompetency,
    onSearchChange,
    search,
  } = props;

  const { t } = useLokaliseTranslation('competencies');

  const hasActiveSearch = search !== '';

  return (
    <Stack sx={{ gap: 2 }}>
      <HuSearch
        value={search}
        onChange={onSearchChange}
      />
      {isEmpty && (
        <HuStateCard
          slotProps={{
            title: {
              title: hasActiveSearch
                ? t('competencies_not_found')
                : t('empty_competencies.title'),
              description: hasActiveSearch
                ? t('retry_search')
                : t('empty_competencies.description'),
            },
            avatar: {
              Icon: IconInfoCircle,
              color: 'primary',
            },
            button: {
              children: t('create_competency'),
              variant: 'secondary',
              startIcon: <IconPlus size={16} />,
              onClick: onCreateCompetency,
            },
          }}
        />
      )}
      {competencies.length > 0 && (
        <CompetenciesTable
          rows={competencies}
          isFetchingNextPage={isFetchingNextPage}
          tableRowsCount={tableRowsCount}
          onLoadMore={onLoadMore}
          onDelete={onDeleteCompetency}
          onEdit={onEditCompetency}
        />
      )}
    </Stack>
  );
};

export default CompetenciesTabContent;