import React, { useState } from 'react';
import SEO from 'utils/SEO';
import Wrapper from 'components/app-layout/Wrapper';
import HeroProfile from 'containers/hero/HeroProfile';
import { Tabs, Container, Box } from '@nova-hf/ui';

import SubscriptionPeriods from 'containers/subscription-periods/SubscriptionPeriods';
import UsageCharges from 'containers/usage-charges/UsageCharges';
import { useRouter } from 'next/router';

const COLOR = 'orange';
interface IGreidslurProps {
  subscriptionId: string;
  authentication?: any;
}

const Greidslur = ({ subscriptionId }: IGreidslurProps) => {
  const router = useRouter();
  const { query } = router;
  const [chosenTab, setChosenTab] = useState(query.tab ? query.tab : 'monthly');
  const handleTabs = (tab: string) => {
    router.push(`/${query.ssn}/thjonusta/${subscriptionId}/greidslur/?tab=${tab}`);
    setChosenTab(tab);
  };
  return (
    <Wrapper header="dark">
      <SEO title={subscriptionId} />
      <HeroProfile
        subtitleLink="/thjonustur"
        color={COLOR}
        background="white"
        subscriptionId={subscriptionId}
      />
      <Container>
        <Box
          paddingX={{ lg: '1/12' }}
          paddingTop={{ sm: 5, lg: 6 }}
          paddingBottom={{ md: 3, lg: 6 }}
        >
          <Tabs
            tabBaseId="greidsluTabs"
            tabBaseLabel="usageChargeOrMonthly"
            selectedTab={chosenTab as string}
            punctuationColor="orange"
            tabs={[
              {
                id: 'monthly',
                label: 'Mánaðargjald',
                panelContent: <SubscriptionPeriods subscriptionId={subscriptionId} color={COLOR} />,
                onClick: () => handleTabs('monthly'),
              },
              {
                id: 'extra',
                label: 'Aukakostnaður',
                panelContent: <UsageCharges subscriptionId={subscriptionId} color={COLOR} />,
                onClick: () => handleTabs('extra'),
              },
            ]}
          />
        </Box>
      </Container>
    </Wrapper>
  );
};

Greidslur.getInitialProps = ({ query }: any) => {
  const { subscriptionId } = query;

  return {
    subscriptionId,
  };
};

export default Greidslur;