import React, { useRef } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import useMount from 'react-use/lib/useMount';
import { StatusBarCustom } from '../../common/components/status-bar-custom';
import { SBox } from '../../common/s-components/layout/s-box';
import { Icon } from '../../common/components/icon';
import { SRow } from '../../common/s-components/layout/s-row';
import { LoadingOverlay } from '../../common/components/loading-overlay';
import { ViewErrors } from './view-errors';
import { theme } from '../../app/theme';
import { Delay } from '../../common/components/delay';
import { getNotificationCooldown$ } from '../../common/utils/notification-service';
import { useAutoUnsub } from '../../common/hooks/use-auto-unsub';
import { appState } from '../../common/utils/app-state-service';

type TProps = {
  loading?: boolean;
  offline?: boolean;
  error?: boolean;
  errorTitle?: string | null;
  errorVariant?: string;
  showGraph?: boolean;
  onBack: () => void;
  renderTitle: () => void;
  renderGraph: () => void;
};

export const GraphScreen: React.FC<TProps> = props => {
  const elRef = useRef<View>();
  const autoUnsub = useAutoUnsub();

  const setHidden = (hide: boolean) => {
    const el = elRef.current;
    if (!el) return;

    el.setNativeProps({
      opacity: hide ? 0 : 1,
    });
  };

  useMount(() => {
    autoUnsub(
      getNotificationCooldown$().subscribe(() => {
        setHidden(true);
      })
    );

    autoUnsub(
      appState.get().subscribe(nextAppState => {
        setHidden(nextAppState !== 'active');
      })
    );
  });

  const {
    onBack,
    renderTitle,
    renderGraph,
    showGraph,
    loading,
    offline,
    error,
    errorTitle,
    errorVariant,
  } = props;

  if (loading) {
    return <LoadingOverlay />;
  }

  return (
    <Delay time={50}>
      <StatusBarCustom />
      <SBox
        flex={1}
        bg={theme.colors.fiord}
        style={StyleSheet.absoluteFill}
        zIndex={9999}
        ref={elRef}
      >
        <SBox position="absolute" zIndex={9999} left={50} top={22}>
          <TouchableOpacity
            testID="close-graph"
            onPress={() => {
              setHidden(true);
              onBack();
            }}
            activeOpacity={0.7}
          >
            <Icon name="close-2" size={32} color="white" />
          </TouchableOpacity>
        </SBox>
        <SRow alignItems="center">
          <SRow flex={1} justifyContent="center" mt={23} mb={23}>
            {renderTitle()}
          </SRow>
        </SRow>
        {!offline && error ? (
          <ViewErrors variant={errorVariant!} title={errorTitle || ''} />
        ) : null}
        {offline ? <ViewErrors variant="network-failed" /> : null}
        {showGraph ? renderGraph() : null}
      </SBox>
    </Delay>
  );
};

GraphScreen.defaultProps = {
  showGraph: false,
  loading: false,
  offline: false,
  error: false,
  errorTitle: null,
  errorVariant: 'load-failed',
};