import React from 'react';
import ReactGA from 'react-ga';
import Head from 'next/head';
import {Box, Flex, Image} from 'rebass';
import {MDXProvider} from '@mdx-js/react';
import {ChatWidget} from '@papercups-io/chat-widget';
import NavMenu from './nav';

export type Props = {
  width?: number;
  className?: string;
  title?: string;
  dark?: boolean;
  children: any;
};
export type State = {};

export default class Container extends React.Component<Props, State> {
  storytime: any = null;
  state = {};

  componentDidMount() {
    const gaTrackingId = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
    const isStorytimeEnabled = process.env.NEXT_STORYTIME_ENABLED;

    if (gaTrackingId) {
      ReactGA.initialize(gaTrackingId);
      ReactGA.pageview(document.location.pathname);
    }

    if (typeof window !== 'undefined' && isStorytimeEnabled) {
      // NB: just testing this out, feel free to remove if anything breaks
      const {Storytime} = require('@papercups-io/storytime');

      this.storytime = Storytime.init({
        accountId: 'eb504736-0f20-4978-98ff-1a82ae60b266',
        debug: true,
      });
    }
  }

  componentWillUnmount() {
    if (this.storytime && this.storytime.finish) {
      this.storytime.finish();
    }
  }

  // TODO: find a better way to handle this?
  isWindowReady = () => {
    return typeof window !== 'undefined';
  };

  getCurrentWindowPath = (): string | null => {
    if (typeof window !== 'undefined') {
      return window.location.pathname;
    } else {
      return null;
    }
  };

  shouldPopUpInitialMessage = (): number | boolean => {
    return this.getCurrentWindowPath() === '/pricing';
  };

  render() {
    const {title, width, dark = false, className = '', children} = this.props;

    return (
      <Flex
        className={`flex-auto flex-col min-h-0 ${
          dark ? 'dark bg-gray-900' : 'bg-white'
        }`}
      >
        <Head>
          <title>
            Papercups | {title || 'Open Source Intercom Alternative'}
          </title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
          <script
            async
            src="https://platform.twitter.com/widgets.js"
            charSet="utf-8"
          ></script>
        </Head>

        <NavMenu dark={dark} />

        <main className="flex-auto min-h-0 dark:text-white">
          <Box
            className={className}
            mx="auto"
            style={{maxWidth: width || 800}}
            pt={5}
            px={4}
            pb={6}
          >
            <MDXProvider components={this.state}>{children}</MDXProvider>
          </Box>
        </main>

        <footer className="bg-gray-800 flex-0">
          <div
            className="max-w-5xl mx-auto px-4"
            style={{maxWidth: width || 800}}
          >
            <Flex py={5} sx={{justifyContent: 'space-between'}}>
              <Flex sx={{alignItems: 'center'}}>
                <p className="text-white pr-3">
                  Backed by <b>Y Combinator</b>
                </p>

                <Image sx={{width: '20px', height: '20px'}} src="yc-logo.png" />
              </Flex>

              <Box>
                <a href="/privacy" className="white_link">
                  Privacy
                </a>
              </Box>
            </Flex>
          </div>
        </footer>

        {this.isWindowReady() && (
          <ChatWidget
            token="eb504736-0f20-4978-98ff-1a82ae60b266"
            inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
            title="Welcome to Papercups!"
            subtitle="Ask us anything in the chat window below 😊"
            greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
            primaryColor="#1890ff"
            iconVariant="filled"
            requireEmailUpfront
            showAgentAvailability
            // Pops up initial message after 2s when `shouldPopUpInitialMessage` return `true`
            popUpInitialMessage={
              this.shouldPopUpInitialMessage() ? 2000 : false
            }
            setDefaultGreeting={(settings) => {
              const path = window.location.pathname;

              switch (path) {
                case '/pricing':
                  return "Hi there! Let us know if you have any questions about pricing :) (we're offering deals to startups and international founders)";
                default:
                  return "Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!";
              }
            }}
          />
        )}
      </Flex>
    );
  }
}