import React from 'react';
import SEO from 'utils/SEO';
import Wrapper from 'components/app-layout/Wrapper';
import { inject } from 'mobx-react';
import SubscriptionPeriods from 'containers/subscription-periods/SubscriptionPeriods';
import NovaTvHeroProfile from 'containers/hero/NovaTvHeroProfile';
import { useQuery } from '@apollo/client';
import { IUserData } from 'typings';
import { SUBSCRIPTION } from 'graphql/queries/subscription';
import Profile from 'store/models/Profile';
import Authentication from 'store/authentication';
import { IContext } from 'typings/context';

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

const Greidslur = ({ subscriptionId, childSubscriptionId, authentication }: IGreidslurProps) => {
  if (!authentication || !authentication.accountInput) return null;
  const { accountInput } = authentication;

  // TODO -> Fix how we query tv subscpriton. Instead of querying with subscriptionId, query with childSubscriptionId. Need to add method to graphql.
  const { loading, data } = useQuery<IUserData>(SUBSCRIPTION, {
    variables: { subscriptionId, accountInput },
  });

  if (loading) {
    return (
      <Wrapper header="light">
        <div>Sæki...</div>
      </Wrapper>
    );
  }

  return (
    <Wrapper header="light">
      <SEO title={subscriptionId} />
      <NovaTvHeroProfile
        profile={data?.me?.profiles[0] as Profile | undefined}
        childSubscriptionId={childSubscriptionId}
      />
      <SubscriptionPeriods
        showStatusBar={false}
        subscriptionId={childSubscriptionId}
        color={COLOR}
      />
    </Wrapper>
  );
};

Greidslur.getInitialProps = ({ query }: IContext) => {
  const { subscriptionId, childSubscriptionId } = query;

  return {
    subscriptionId,
    childSubscriptionId,
  };
};

export default inject('authentication', 'ui')(Greidslur);