import React, { PureComponent } from 'react';
import { Alert, Dimensions, Platform, StatusBar } from 'react-native';
import * as Updates from 'expo-updates';
import { Button } from '../../common/components/button';
import { SBox } from '../../common/s-components/layout/s-box';
import { SCentered } from '../../common/s-components/layout/s-centered';
import { SImage } from '../../common/s-components/s-image';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { SH4 } from '../../common/s-components/typography/s-h4';
// import { TToggleOtaUpdateScreen } from '../types';
// import { checkDeviceWithSmallWidth } from '../../common/transducers';

const updateSplashImage = require('../../../assets/update-splash/update-splash.png');

const isIOS = Platform.OS === 'ios';

const DEFAULT_TEXT =
  'We made some improvements for you.\nPlease restart the app to download.';

const { width } = Dimensions.get('window');

type TProps = {
  // toggleOtaUpdateScreen: TToggleOtaUpdateScreen;
  isLandscape?: boolean | null;
};

export class OtaUpdateScreen extends PureComponent<TProps> {
  static defaultProps = {
    isLandscape: null,
  };

  openErrorAlert = () =>
    Alert.alert(
      'Error',
      'Error occured trying to open link for downloading newest version of ApolloInsights',
      [
        {
          text: 'OK',
        },
      ]
    );

  handleRestartPress = () => {
    Updates.reloadAsync()
      // .then(res => {
      //   console.rx({ SUCCESS_RELOAD_ASYNC: true, res });
      // })
      // .catch(e => {
      .catch(() => {
        // console.rx({
        //   ERROR_RELOAD_ASYNC: e.message,
        // });
      });
  };

  restartButton = () => (
    <SBox width={178} mt={27}>
      <Button
        testID="update-splash-button"
        variant="primary"
        onPress={this.handleRestartPress}
        width={1}
        px={isIOS ? undefined : 10}
      >
        Restart and apply
      </Button>
    </SBox>
  );

  renderSplashImage = () => {
    const { isLandscape } = this.props;
    let maxWidth = 343;
    let resizeMode = 'cover';

    if (!isIOS && isLandscape && width < 700) {
      maxWidth = 290;
      resizeMode = 'contain';
    }

    return (
      <SImage
        source={updateSplashImage}
        maxHeight={265}
        maxWidth={maxWidth}
        resizeMode={resizeMode}
      />
    );
  };

  renderPortrait = () => {
    return (
      <SBox
        position="absolute"
        width="100%"
        height="100%"
        zIndex={1000}
        bg="ebonyClay"
      >
        <SCentered bg="ebonyClay">
          <StatusBar barStyle="light-content" translucent />
          <SBox pl={16} pr={16} alignItems="center" mt={-37}>
            <SBox>{this.renderSplashImage()}</SBox>
            <SBox mt={29}>
              <SBox alignItems="center">
                <SH2 lineHeight="24px">New Version Available</SH2>
              </SBox>
              <SBox mt={11}>
                <SH4
                  normal
                  lineHeight="20px"
                  numberOfLines={3}
                  textAlign="center"
                >
                  {DEFAULT_TEXT}
                </SH4>
              </SBox>
            </SBox>
            <SBox ml={-1}>{this.restartButton()}</SBox>
          </SBox>
        </SCentered>
      </SBox>
    );
  };

  renderLandscape = () => {
    return (
      <SBox
        position="absolute"
        width="100%"
        height="100%"
        zIndex={1000}
        bg="ebonyClay"
        alignItems="center"
        justifyContent="center"
      >
        <SBox flexDirection="row" pt={1}>
          {this.renderSplashImage()}
          <SBox width={375}>
            <SBox pl={32} pt={58}>
              <SH2 lineHeight="24px">New Version Available</SH2>
              <SBox mt={12}>
                <SH4 normal lineHeight="20px" numberOfLines={3}>
                  {DEFAULT_TEXT}
                </SH4>
              </SBox>
              {this.restartButton()}
            </SBox>
          </SBox>
        </SBox>
      </SBox>
    );
  };

  render() {
    const { isLandscape } = this.props;
    if (isLandscape === null) {
      return null;
    }
    return isLandscape ? this.renderLandscape() : this.renderPortrait();
  }
}