import '../styles/globals.scss'
import { ApolloProvider, gql } from '@apollo/client'
import { Provider } from 'next-auth/client'
import { FundErrorModal, FundErrorProvider } from '../components/fund-error'
import { MeProvider } from '../components/me'
import PlausibleProvider from 'next-plausible'
import { LightningProvider } from '../components/lightning'
import { ItemActModal, ItemActProvider } from '../components/item-act'
import getApolloClient from '../lib/apollo'
import { createGlobalStyle, ThemeProvider } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.color};
  }

  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: inherit;
    background-color: ${({ theme }) => theme.inputBg};
    border-color: ${({ theme }) => theme.borderColor};
    border-bottom-color: ${({ theme }) => theme.inputBg};
  }

  .form-control {
    background-color: ${({ theme }) => theme.inputBg};
    color: ${({ theme }) => theme.color};
    border-color: ${({ theme }) => theme.borderColor};
  }

  .form-control:focus {
    background-color:  ${({ theme }) => theme.inputBg};
    color: ${({ theme }) => theme.color};
  }

  .form-control:disabled, .form-control[readonly] {
    background-color: ${({ theme }) => theme.inputBg};
    border-color: ${({ theme }) => theme.borderColor};
    opacity: 1;
  }

  .clickToContext {
    border-radius: .4rem;
    padding: .2rem 0;
    cursor: pointer;
  }

  .clickToContext:hover {
    background-color: ${({ theme }) => theme.clickToContextColor};
  }

  .fresh {
    background-color: ${({ theme }) => theme.clickToContextColor};
    border-radius: .4rem;
  }

  .modal-content {
    background-color: ${({ theme }) => theme.body};
    border-color: ${({ theme }) => theme.borderColor};
  }
`

// const lightTheme = {
//   body: 'linear-gradient(180deg, #f5f5f5, #f5f5f5, white)',
//   color: '#212529',
//   navbarVariant: 'light',
//   inputBg: '#ffffff',
//   navbarVariant: 'light',
//   borderColor: 'rgb(255 255 255 / 50%)',
//   dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
//   dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
//   commentBg: 'rgba(255, 255, 255, 0.04)',
//   clickToContextColor: 'rgba(255, 255, 255, 0.08)',
//   color: '#f8f9fa',
//   brandColor: 'var(--primary) !important'
// }

const darkTheme = {
  body: '#000000',
  inputBg: '#000000',
  navbarVariant: 'dark',
  borderColor: 'rgb(255 255 255 / 50%)',
  dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
  dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
  commentBg: 'rgba(255, 255, 255, 0.04)',
  clickToContextColor: 'rgba(255, 255, 255, 0.08)',
  color: '#f8f9fa',
  brandColor: 'var(--primary) !important'
}

function MyApp ({ Component, pageProps: { session, ...props } }) {
  const client = getApolloClient()
  /*
    If we are on the client, we populate the apollo cache with the
    ssr data
  */
  if (typeof window !== 'undefined') {
    const { apollo, data } = props
    if (apollo) {
      client.writeQuery({
        query: gql`${apollo.query}`,
        data: data,
        variables: apollo.variables
      })
    }
  }

  return (
    <PlausibleProvider domain='stacker.news' trackOutboundLinks>
      <ThemeProvider theme={darkTheme}>
        <GlobalStyle />
        <Provider session={session}>
          <ApolloProvider client={client}>
            <MeProvider>
              <LightningProvider>
                <FundErrorProvider>
                  <FundErrorModal />
                  <ItemActProvider>
                    <ItemActModal />
                    <Component {...props} />
                  </ItemActProvider>
                </FundErrorProvider>
              </LightningProvider>
            </MeProvider>
          </ApolloProvider>
        </Provider>
      </ThemeProvider>
    </PlausibleProvider>
  )
}

export default MyApp