import React, { useState } from 'react';
import { Box, ContainerDeprecated, NotificationBanner } from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import Hero from 'containers/hero/Hero';
import { startOfMonth } from 'date-fns';
import { inject, observer } from 'mobx-react';
import Link from 'next/link';
import Authentication from 'store/authentication';
import { useMeQuery } from 'typings/graphql';
import { WithTranslation, withTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';

import FilterBarContainer from './containers/filter-bar/FilterBarContainer';
import Subscriptions from './containers/subscriptions/Subscriptions';

interface IThjonusturProps extends WithTranslation {
  ui?: any;
  query: any;
  page: number;
  search: string;
  department: string;
  rateplan: string;
  date: string;
  namespacesRequired: string[];
  authentication: Authentication;
}

const Thjonustur = (props: IThjonusturProps) => {
  const [showOnlyActiveSubscriptions, setshowOnlyActiveSubscriptions] = useState(true);
  const {
    page,
    search,
    department,
    date,
    rateplan,
    t,
    ui: { pageColor, view },
    authentication,
  } = props;

  const dateTime = date ? new Date(date) : new Date();

  const {
    accountInput: { ssn },
  } = authentication;

  const { data } = useMeQuery({
    variables: { accountInput: { ssn } },
  });

  const isCompany = !!data?.me?.userProfile?.isCompany;

  return (
    <Wrapper>
      <SEO title={t('index.yourServices')} />
      <Hero title={t('index.yourServices')} color={pageColor} />
      <FilterBarContainer
        color={pageColor}
        department={department}
        search={search}
        rateplan={rateplan}
        dateTime={startOfMonth(dateTime)}
        setshowOnlyActiveSubscriptions={setshowOnlyActiveSubscriptions}
        showOnlyActiveSubscriptions={showOnlyActiveSubscriptions}
      />

      <ContainerDeprecated underBar withStickyBar>
        <Box marginBottom={6}>
          {authentication.isEmailLogin && (
            <NotificationBanner
              eyebrowText={t('emailLoginWarning.eyebrow')}
              description={
                isCompany
                  ? `${t('emailLoginWarning.body')} ${t('emailLoginWarning.companyBody')}`
                  : t('emailLoginWarning.body')
              }
              hasPingAlert
              icon="warning"
              mainButtonColored={
                isCompany
                  ? {
                      icon: 'longArrowRight',
                      text: t('emailLoginWarning.button'),
                      wrapper: (link: string) => (
                        <Link href={`/${ssn}/stillingar/tengilidir`} passHref legacyBehavior>
                          {link}
                        </Link>
                      ),
                    }
                  : undefined
              }
              title={t('emailLoginWarning.title')}
            />
          )}
        </Box>

        <Subscriptions
          page={page || 1}
          color={pageColor}
          search={search}
          department={department}
          rateplanId={rateplan}
          date={startOfMonth(dateTime)}
          view={view}
          showOnlyActiveSubscriptions={showOnlyActiveSubscriptions}
        />
      </ContainerDeprecated>
    </Wrapper>
  );
};

Thjonustur.getInitialProps = ({ query }: IThjonusturProps) => {
  const { page, search, department, date, rateplan } = query;

  return {
    page: parseInt(page as string, 10),
    search,
    department,
    date,
    rateplan,
    namespacesRequired: ['common', 'subscriptions'],
  };
};

export default withTranslation('subscriptions')(
  inject('ui', 'authentication')(observer(Thjonustur)),
);