import { IconInfoSquareRounded, IconSearch } from '@material-hu/icons/tabler';
import * as animations from '@material-hu/utils/animations';

import HuStateCard from '@material-hu/components/composed-components/StateCard';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { useFilterParams } from '../../hooks/useFilterParams';

type ListEmptyProps = {
  emptyTexts: {
    title: string;
    description: string;
  };
};

export const ListEmpty = ({ emptyTexts }: ListEmptyProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');
  const { filterParams } = useFilterParams();

  const hasActiveFilters =
    filterParams.progressStatus ||
    filterParams.search ||
    filterParams.expirationStatus;

  const title = hasActiveFilters
    ? t('empty_tasks_list.searched_no_results_title')
    : emptyTexts.title;

  const description = hasActiveFilters
    ? t('empty_tasks_list.searched_no_results_description')
    : emptyTexts.description;

  const Icon = hasActiveFilters ? IconSearch : IconInfoSquareRounded;

  if (!emptyTexts) return null;

  return (
    <HuStateCard
      cardContained
      sx={{ animation: `${animations.fadeIn} 200ms ease-in-out backwards` }}
      slotProps={{
        title: { title, description },
        avatar: {
          Icon,
          size: 'medium',
          color: hasActiveFilters ? 'primary' : 'default',
        },
      }}
    />
  );
};

export default ListEmpty;
