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, { OnlyLogoNavbar } from "./component"
import Provider from "./Provider"
import defaultLink from "./defaultLink"
import { userInfoFragment } from "./UserInfo"

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)
  }
)
class Container extends React.Component<{
  Link?: React.Component
  isLoggedIn: boolean
  style?: any
  className?: string
  streamUrl: string
  coreGraphQLUrl?: string
}> {
  public render() {
    return (
      <Provider Link={this.props.Link || defaultLink}>
        <Component
          coreGraphQLUrl={this.props.coreGraphQLUrl}
          className={this.props.className}
          isLoggedIn={this.props.isLoggedIn}
          style={this.props.style}
          streamUrl={this.props.streamUrl}
        />
      </Provider>
    )
  }
}

// tslint:disable
export class OnlyLogoNavigationBar extends React.Component {
  public render() {
    return (
      <OnlyLogoNavbar />
    )
  }
}

export { userInfoFragment }
export default withData(Container)