import Tabs from '@material-hu/components/design-system/Tabs';

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

import { Catalog } from '../Catalog';
import { ExchangesTab } from '../constants';
import { History } from '../History';
import { useExchangesTab } from '../hooks/useExchangesTab';
import { isValidExchangesTab } from '../utils';

export const ExchangesTabs = () => {
  const { t } = useLokaliseTranslation('acknowledgements');

  const [tab, setTab] = useExchangesTab();

  const tabs = [
    { label: t('products.prizes_catalog'), value: ExchangesTab.Catalog },
    { label: t('products.exchanges_history'), value: ExchangesTab.History },
  ];

  const handleTabChange = (value: string) => {
    if (isValidExchangesTab(value)) {
      setTab(value);
    }
  };

  return (
    <>
      <Tabs
        tabs={tabs}
        value={tab}
        onTabChange={handleTabChange}
      />
      {tab === ExchangesTab.Catalog && <Catalog />}
      {tab === ExchangesTab.History && <History />}
    </>
  );
};