import * as React from "react"
import { graphql } from "react-apollo"
import gql from "graphql-tag"
import { css } from "styled-components"
import breakpoint from "styled-components-breakpoint"
import Component from "./component"
import Provider from "./Provider"
import defaultLink from "./defaultLink"

export const paddingTop = css`
  box-sizing: border-box;

  ${breakpoint("mobile")`
    padding-top: 108px;
  `}
  ${breakpoint("tablet")`
    padding-top: 55px;
  `}

  @media screen and (min-width: 950px) {
    padding-top: 70px;
  }
`

// interface NavigationbarPropTypes {
//   Link?: any, style?: any, className?: string, context?: NavigationBarContext, streamUrl: string
// }

const withData = graphql<any, any, any, any>(
  gql`
    {
      user {
        _id
      }
    }
  `,
  {
    props: ({ data }) => ({
      isLoggedIn: !!data && !!data.user
    }),
    options: () => ({
      context: {
        service: "nap"
      }
    } as any)
  }
)
export type NavigationBarContext = {
  SEARCH_GRAPHQL_URI?: string
  url?: any
}
class Container extends React.Component<{ Link?: React.Component, isLoggedIn: boolean, style?: any, className?: string, context?: NavigationBarContext, streamUrl: string }> {

  public render() {
    return (
      <Provider Link={this.props.Link || defaultLink}>
        <Component context={this.props.context} className={this.props.className} isLoggedIn={this.props.isLoggedIn} style={this.props.style} streamUrl={this.props.streamUrl} />
      </Provider>
    )
  }
}

export default withData(Container)