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 { CompetencyProfile } from 'src/types/competencies';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CompetenciesProfileTable from './CompetenciesProfileTable/CompetenciesProfileTable';

type CompetenciesProfileTabContentProps = {
  competencyProfiles: CompetencyProfile[];
  onCreateCompetencyProfile: () => void;
  isEmpty: boolean;
  tableRowsCount: number;
  isFetchingNextPage: boolean;
  onLoadMore: () => void;
  onDeleteCompetencyProfile: (competencyProfileId: number) => void;
  onEditCompetencyProfile: (competencyProfile: CompetencyProfile) => void;
  onSearchChange: (search: string) => void;
  search: string;
};

const CompetenciesProfileTabContent = (
  props: CompetenciesProfileTabContentProps,
) => {
  const {
    competencyProfiles,
    onCreateCompetencyProfile,
    isEmpty,
    isFetchingNextPage,
    tableRowsCount,
    onLoadMore,
    onDeleteCompetencyProfile,
    onEditCompetencyProfile,
    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('profile_not_found')
                : t('empty_profiles.title'),
              description: hasActiveSearch
                ? t('retry_search')
                : t('empty_profiles.description'),
            },
            avatar: {
              Icon: IconInfoCircle,
              color: 'primary',
            },
            button: {
              children: t('create_profile'),
              variant: 'secondary',
              startIcon: <IconPlus size={16} />,
              onClick: onCreateCompetencyProfile,
            },
          }}
        />
      )}
      {competencyProfiles.length > 0 && (
        <CompetenciesProfileTable
          rows={competencyProfiles}
          isFetchingNextPage={isFetchingNextPage}
          tableRowsCount={tableRowsCount}
          onLoadMore={onLoadMore}
          onDelete={onDeleteCompetencyProfile}
          onEdit={onEditCompetencyProfile}
        />
      )}
    </Stack>
  );
};

export default CompetenciesProfileTabContent;