import { type FC } from 'react';
import { useNavigate } from 'react-router';

import AddCircleOutline from '@material-hu/icons/material/AddCircleOutline';

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

import SplitButton from 'src/components/SplitButton';

import { positionsRoutes } from './routes';

export const NewButton: FC = () => {
  const { t } = useLokaliseTranslation('settings');
  const navigate = useNavigate();

  const handleNewPosition = () => navigate(positionsRoutes.new());
  const handleBulkUpload = () => navigate(positionsRoutes.bulkUpload());

  const newOptions = [
    {
      label: t('GENERAL.POSITIONS_TAB.NEW_POSITION'),
      onClick: handleNewPosition,
    },
    {
      label: t('GENERAL.POSITIONS_TAB.BULK_UPLOAD_POSITIONS'),
      onClick: handleBulkUpload,
    },
  ];

  return (
    <SplitButton
      options={newOptions}
      defaultButtonProps={{
        startIcon: <AddCircleOutline />,
      }}
    />
  );
};

export default NewButton;