import * as React from 'react';
import { useState } from 'react';
import { Box, ContainerDeprecated } from '@nova-hf/ui';
import History from 'beta/containers/history/History';
import { HistoryFilters } from 'beta/containers/history/historyFilters';
import Wrapper from 'components/app-layout/Wrapper';
import HeroProfile from 'containers/hero/HeroProfile';
import { inject } from 'mobx-react';
import Authentication from 'store/authentication';
import { useSubscriptionQuery } from 'typings/graphql';
import { WithTranslation, withTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';

interface ISaganProps extends WithTranslation {
  ui?: any;
  subscriptionId: string;
  query: any;
  link: string;
  authentication: Authentication;
}

const Index = ({
  subscriptionId,
  authentication: { accountInput },
  ui: { pageColor },
}: ISaganProps) => {
  const [filter, setFilter] = useState('All');
  const onSelect = (item: string) => {
    setFilter(item);
  };
  const { data } = useSubscriptionQuery({
    variables: { subscriptionId, accountInput },
  });

  const profile = data?.me?.profiles?.find((profile) => profile?.subscriptionId === subscriptionId);

  const subscriptionGuid = profile?.subscriptionGuid;

  return (
    <Wrapper header="dark">
      <SEO title={subscriptionId} />
      <HeroProfile
        subtitleLink="/thjonustur"
        color={pageColor}
        background="white"
        subscriptionId={subscriptionId}
      />
      <ContainerDeprecated underBar spacing>
        <Box padding={5} boxShadow="small" backgroundColor="white">
          <HistoryFilters color={pageColor} onSelect={onSelect} />
          <History
            category={filter}
            regardingIds={subscriptionGuid ? [subscriptionGuid] : undefined}
          />
        </Box>
      </ContainerDeprecated>
    </Wrapper>
  );
};

Index.getInitialProps = ({ pathname, query }: any) => {
  const { subscriptionId, date } = query;

  return {
    subscriptionId,
    date: date ? date : new Date(),
    namespacesRequired: ['common', 'refill', 'service', 'errors'],
    link: pathname,
  };
};

export default withTranslation('refill')(inject('ui', 'authentication')(Index));