import { appearFromBottom } from '@material-hu/utils/animations';

import Alert from '@material-hu/components/design-system/Alert';
import { useDrawerLayer } from '@material-hu/components/layers/Drawers';

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

import useKnowledgeBaseAudience from '../../hooks/useKnowledgeBaseAudience';
import { type KnowledgeBaseAudienceForm } from '../../types';
import KnowledgeBaseAudienceCollaboratorsDrawer from '../KnowledgeBaseAudienceCollaboratorsDrawer';

type KnowledgeBaseAudienceAlertProps = KnowledgeBaseAudienceForm;

const BASE_KEY = 'knowledge_base.edit_audience_drawer';

const KnowledgeBaseAudienceAlert = ({
  audienceType,
  segmentation,
}: KnowledgeBaseAudienceAlertProps) => {
  const { t } = useLokaliseTranslation('agents');
  const { openDrawer } = useDrawerLayer();

  const { totalCount, isLoading, criteria } = useKnowledgeBaseAudience({
    audienceType,
    segmentation,
  });

  const handleShowCollaboratorsDrawer = () => {
    openDrawer({
      content: (
        <KnowledgeBaseAudienceCollaboratorsDrawer
          criteria={criteria}
          totalCount={totalCount}
        />
      ),
    });
  };

  return (
    <Alert
      severity="info"
      title={t(`${BASE_KEY}.collaborators_selected`, { count: totalCount })}
      sx={{
        minHeight: '74px',
        animation: `${appearFromBottom} 0.3s ease-in-out`,
      }}
      action={
        totalCount
          ? {
              text: t(`${BASE_KEY}.view_collaborators`),
              onClick: handleShowCollaboratorsDrawer,
            }
          : undefined
      }
      loading={isLoading}
      skeletonProps={{ height: '36px' }}
    />
  );
};

export default KnowledgeBaseAudienceAlert;