import SelectionCard from '@material-hu/components/composed-components/SelectionCard';
import RadioButton from '@material-hu/components/design-system/RadioButton/RadioButton';

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

import {
  type KnowledgeBaseAudienceForm,
  KnowledgeBaseAudienceType,
} from '../../types';

type KnowledgeBaseAudienceSelectorProps = {
  audienceType: KnowledgeBaseAudienceForm['audienceType'];
  onSelectAudience: (value: KnowledgeBaseAudienceType) => void;
};

const KnowledgeBaseAudienceSelector = ({
  audienceType,
  onSelectAudience,
}: KnowledgeBaseAudienceSelectorProps) => {
  const { t } = useLokaliseTranslation('agents');

  const options = [
    {
      value: KnowledgeBaseAudienceType.ALL,
      label: t('knowledge_base.edit_audience_drawer.all_collaborators'),
      description: t(
        'knowledge_base.edit_audience_drawer.all_collaborators_description',
      ),
    },
    {
      value: KnowledgeBaseAudienceType.SEGMENTED,
      label: t('knowledge_base.edit_audience_drawer.segment_audience'),
      description: t(
        'knowledge_base.edit_audience_drawer.segment_audience_description',
      ),
    },
  ];

  return (
    <>
      {options.map(card => (
        <SelectionCard
          key={`selection-card-${card.value}`}
          checked={false}
          onClick={() => onSelectAudience(card.value)}
          fullWidth
          hasShadow
          sx={{ '&:hover': { shadow: theme => theme.shadows[5] } }}
        >
          <RadioButton
            label={card.label}
            description={card.description}
            isActive={audienceType === card.value}
          />
        </SelectionCard>
      ))}
    </>
  );
};

export default KnowledgeBaseAudienceSelector;