import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { Tabs } from '@nova-hf/ui';
import { IContext } from 'beta/typings/context';
import SideMenuLayout from 'beta/components/layouts/SideMenuLayout';
import { useTranslation } from 'utils/i18n';
import { Personal } from './containers/Personal';
import { Payments } from './containers/Payments';
import { Contacts } from './containers/Contacts';
import { Departments } from './containers/Departments';

const TabIds = ['umthig', 'greidslur', 'deildir', 'tengilidir'] as const;
export type TabIdsType = typeof TabIds[number];

const Stillingar = () => {
  const { t } = useTranslation('stillingar');
  const router = useRouter();
  const [selectedTab, setSelectedTab] = useState<TabIdsType>('umthig');

  const handleTabClick = (filter: TabIdsType) => {
    delete router.query.tab;
    delete router.query.email;
    router.replace({
      query: { ...router.query, tab: filter },
    });
  };

  useEffect(() => {
    if (router.query.tab) {
      setSelectedTab(router.query.tab as TabIdsType);
    }
  }, [router.query]);

  const tabs = [
    {
      id: 'umthig',
      label: t('tabs.personal'),
      panelContent: <Personal />,
      onClick: () => handleTabClick('umthig'),
    },
    {
      id: 'greidslur',
      label: t('tabs.payments'),
      panelContent: <Payments />,
      onClick: () => handleTabClick('greidslur'),
    },
    {
      id: 'deildir',
      label: t('tabs.departments'),
      panelContent: <Departments />,
      onClick: () => handleTabClick('deildir'),
    },
    {
      id: 'tengilidir',
      label: t('tabs.contacts'),
      panelContent: <Contacts />,
      onClick: () => handleTabClick('tengilidir'),
    },
  ];

  return (
    <SideMenuLayout title={t('heroTitle')}>
      <Tabs
        tabBaseId="settingsTabs"
        tabBaseLabel="settings tabs"
        selectedTab={selectedTab}
        tabs={tabs}
      />
    </SideMenuLayout>
  );
};

Stillingar.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    namespacesRequired: ['stillingar'],
  };
};

export default Stillingar;