import React, { useState, useEffect } from 'react';
import { Asset } from 'expo-asset';
import * as SystemUI from 'expo-system-ui';
import * as Font from 'expo-font';
// https://www.npmjs.com/package/uuid#react-native--expo
import 'react-native-get-random-values';
//import { Linking } from 'expo';
import { Provider } from 'react-redux';
import { StyleSheet, LogBox } from 'react-native';
import { ThemeProvider } from 'styled-components/native';
import { PersistGate } from 'redux-persist/lib/integration/react';
import * as ScreenOrientation from 'expo-screen-orientation';
// import { createAppContainer } from 'react-navigation';
import '../common/utils/debuggers/sentry-logger';
// import { configureStore } from './core/store';
import { theme } from './theme';
// import { initApiRx } from '../common/utils/api-rx';
import { SplashOverlay } from '../common/components/splash-overlay';
// import { AppNavigator, onNavigationStateChange } from './navigation';
import NotificationsRegistrator from '../notifications/containers/notifications-registrator';
import { ErrorBoundary } from '../common/components/error-boundary';
import { PersistPing, PersistPong } from './core/persist-gate-hack';
import { SBox } from '../common/s-components/layout/s-box';
import { PortalProvider } from '../common/utils/portal/portal-provider';
import { PortalGate } from '../common/utils/portal/portal-gate';
import UpdateSplash from '../updater/containers/update-splash';
import Analytics from '../analytics/containers/analytics';
// TODO leave only one source???
import CommonPreloadMarkets from '../common/containers/preload-markets';
import PreloadMarkets from '../market-selector/containers/preload-markets';
import SurveyIntro from '../welcome-survey/containers/intro';
import SurveyCarousel from '../welcome-survey/containers/welcome-survey';
import OtaUpdateScreen from '../updater/containers/ota-update-screen';
// TODO: NotificationsNew
// import { getNotificationsObservable } from '../notifications/services/push-notifications';
import { Navigator } from './navigation';
import { DebugPanel } from '../common/utils/debuggers/debug-panel';
import { store, persistor } from './core/redux';
import FeatureFlags from '../common/containers/feature-flags';

// const { store, persistor } = configureStore();

// initApiRx(store);

// const Navigator = createAppContainer(AppNavigator);

// TODO: NotificationsNew
// getNotificationsObservable().subscribe(val => {
// @ts-ignore
// eslint-disable-next-line
// console.rx({
//   PUSH_ROOT: 'PUSH_ROOT',
//   val,
// });
// });

//const prefix = Linking.makeUrl('/');

/* eslint-disable global-require */
const preloadFonts = () =>
  Font.loadAsync({
    montserrat: require('../../assets/fonts/montserrat/Montserrat-Regular.ttf'),
    montserratBold: require('../../assets/fonts/montserrat/Montserrat-Bold.ttf'),
    montserratSemiBold: require('../../assets/fonts/montserrat/Montserrat-SemiBold.ttf'),
    montserratMedium: require('../../assets/fonts/montserrat/Montserrat-Medium.ttf'),
    icomoon: require('../../assets/fonts/icomoon/fonts/icomoon.ttf'),
  });

const preloadImages = () =>
  Asset.loadAsync([
    require('../../assets/bg-track/non-sony-track.png'),
    require('../../assets/placeholder.png'),
    require('../../assets/icon.png'),
    require('../../assets/bars-white.gif'),
    require('../../assets/bars.gif'),
    require('../../assets/placeholders/start-typing.png'),
    require('../../assets/placeholders/no-tracks-to-show.png'),
    require('../../assets/placeholders/no-tracks-to-show-dark.png'),
    require('../../assets/placeholders/no-tracks-to-show-light.png'),
    require('../../assets/placeholders/no-starred-tracks.png'),
    require('../../assets/placeholders/all-caught-up.png'),
    require('../../assets/placeholders/connection-is-lost.png'),
    require('../../assets/placeholders/connection-is-lost-white.png'),
    require('../../assets/placeholders/connection-is-lost-light.png'),
    require('../../assets/placeholders/failed-to-load-the-page.png'),
    require('../../assets/placeholders/no-tracks-in-chart.png'),
    require('../../assets/placeholders/not-available-in-market.png'),
    require('../../assets/placeholders/push-notifications-off.png'),
    require('../../assets/placeholders/no-playlists.png'),
    require('../../assets/placeholders/no-spotify.png'),
    require('../../assets/placeholders/no-apple.png'),
    require('../../assets/logo.png'),
    require('../../assets/onboarding/onboarding-1.png'),
    require('../../assets/onboarding/onboarding-2.png'),
    require('../../assets/onboarding/onboarding-3.png'),
    require('../../assets/onboarding/onboarding-4.png'),
    require('../../assets/changelog/whats-new-1.png'),
    require('../../assets/changelog/whats-new-2.png'),
    require('../../assets/profile-paused.png'),
    require('../../assets/update-splash/update-splash.png'),
    require('../../assets/placeholders/no-streams.png'),
    require('../../assets/placeholders/no-tracks-exited.png'),
    require('../../assets/placeholders/no-tracks-entered.png'),
    require('../../assets/placeholders/no-major-moves.png'),
    require('../../assets/placeholders/no-major-moves.png'),
    require('../../assets/survey-intro.png'),
  ]);

// https://stackoverflow.com/questions/53012355/how-to-delay-splashscreen-of-redux-persist-gate
// https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
// https://github.com/rt2zz/redux-persist/issues/579#issuecomment-355370867
const AppContainer = () => {
  const [isReady, setReady] = useState(false);

  useEffect(() => {
    try {
      // https://github.com/expo/expo/issues/15009
      ScreenOrientation.lockAsync(
        ScreenOrientation.OrientationLock.PORTRAIT_UP
      );
      SystemUI.setBackgroundColorAsync(theme.colors.ebonyClay);
    } catch {
      // console.log('error');
    }

    Promise.all([preloadImages(), preloadFonts()]).then(() => {
      setReady(true);
    });
  }, []);

  // in case different version - get app stage from async storage - and only after that show this screen
  // https://github.com/rt2zz/redux-persist/issues/579#issuecomment-362418566
  return (
    <ErrorBoundary>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <SBox style={StyleSheet.absoluteFill} bg="ebonyClay">
            <PersistPing onTick={persistor.persist}>
              {isReady ? (
                <PersistGate loading={<SplashOverlay />} persistor={persistor}>
                  <PersistPong>
                    <PortalProvider>
                      <Navigator />
                      <DebugPanel />
                      <NotificationsRegistrator />
                      {/* @ts-ignore */}
                      <PortalGate />
                      <UpdateSplash />
                      <SurveyIntro />
                      <SurveyCarousel />
                      <OtaUpdateScreen />
                      <FeatureFlags />
                      <Analytics />
                      <CommonPreloadMarkets />
                      <PreloadMarkets />
                    </PortalProvider>
                  </PersistPong>
                </PersistGate>
              ) : (
                <SplashOverlay />
              )}
            </PersistPing>
          </SBox>
        </ThemeProvider>
      </Provider>
    </ErrorBoundary>
  );
};

// @ts-ignore
export const App = global.__DEV__
  ? require('../common/utils/debuggers/reactotron-config').reactotron.overlay(
      AppContainer
    )
  : AppContainer;

// @ts-ignore
if (global.__DEV__) {
  const ignoreWarns = [
    'old version of react-navigation library',
    'Expected style',
    'YellowBox has been replaced with LogBox',
    '(expo-constants)',
    'Setting a timer',
    'apply the shadow to a more specific component',
  ];

  // const { warn } = console;
  // // eslint-disable-next-line no-console
  // console.warn = (...arg) => {
  //   // eslint-disable-next-line no-restricted-syntax
  //   for (const warning of ignoreWarns) {
  //     if (arg[0].includes(warning)) {
  //       return;
  //     }
  //   }
  //
  //   warn.apply(console, arg);
  // };

  LogBox.ignoreLogs(ignoreWarns);
}