import * as React from 'react';

import gql from 'graphql-tag';
import { inject } from 'mobx-react';
import { connectionFragment } from 'graphql/fragments/connection';
import { profileFragment } from 'graphql/fragments/profile';

import { IMeQueryProps, MeQuery } from './types';

const CONNECTIONS = gql`
  query connections($subscriptionId: ID, $accountInput: AccountInput) {
    me(input: $accountInput) {
      ssn
      subscriptions {
        subscriptions {
          subscriptionId
          title
          name
          rateplan {
            typeId
            isPrepaid
            title
          }
        }
      }
      profiles (subscriptionId: $subscriptionId) {
          ...ProfileFragment
          connections {
            ...ConnectionFragment
          }
        }
      }
    }
  ${profileFragment}
  ${connectionFragment}
`;

@inject('authentication')
export default class Query extends React.Component<IMeQueryProps> {
  render() {
    const { authentication: { accountInput }, variables, children, ...rest } = this.props;

    return (
      <MeQuery query={CONNECTIONS} variables={{ accountInput, ...variables }} {...rest}>
        {result => children(result)}
      </MeQuery>
    );
  }
}