import { t } from 'i18next';

import DropdownButton from '../../../components/button/DropdownButton';
import PrimaryButton from '../../../components/button/PrimaryButton';
import SelectDropdown from '../../../components/dropdown/SelectDropdown';

type ListItem = {
  id: number;
  value: string;
  label?: string;
  locale?: string;
};

type ListItemCategory = {
  id: number;
  value: string;
  label?: string;
  isNull?: boolean;
  hrEnabled?: boolean;
  onClick: (item: ListItem) => void;
};

type VulnerabilityButtonsProps = {
  categoriesList: ListItemCategory[];
  currentLanguage: ListItem | null;
  languagesList: ListItem[];
  loadingLanguage: boolean;
  setCurrentLanguage: (item: ListItem) => void;
  setOpenMerge: React.Dispatch<React.SetStateAction<boolean>>;
};

const VulnerabilityButtons: React.FC<VulnerabilityButtonsProps> = ({
  categoriesList,
  currentLanguage,
  languagesList,
  loadingLanguage,
  setCurrentLanguage,
  setOpenMerge,
}) => {
  return (
    <div className="flex items-center gap-x-4">
      {!loadingLanguage ? (
        <SelectDropdown
          items={languagesList}
          onChange={setCurrentLanguage}
          placeholder={t('language')}
          selected={currentLanguage}
          title={t('languages')}
        />
      ) : null}
      <div className="flex justify-between w-full">
        <div className="mt-2 mx-2">
          <PrimaryButton onClick={() => setOpenMerge(true)}>
            <span className="mx-1">{t('mergeVulnerabilities')}</span>
          </PrimaryButton>
        </div>
        <div className="mt-2 mx-2">
          <DropdownButton
            items={categoriesList}
            placeholder={t('newVulnerability')}
          />
        </div>
      </div>
    </div>
  );
};

export default VulnerabilityButtons;