import React from 'react';
import { Dimensions, View } from 'react-native';
// Reduxs
import { connect } from 'react-redux';
// FileSytem
import * as FileSystem from 'expo-file-system';
// Video
import { ResizeMode } from 'expo-av';
import VideoPlayer from 'expo-video-player';
// Sentry
import * as Sentry from '@sentry/react-native';

function mapStateToProps(state) {
  return {
    mainColor: state.app.mainColor,
  };
}

class VideoScreen extends React.Component {
  render() {
    const { uuid } = this.props.route.params;
    let width = Dimensions.get('window').width;
    let height = Dimensions.get('window').height;

    // * If on portrait
    if (height > width) {
      const tmpHeight = height;
      height = width - 150;
      width = tmpHeight + 100;
    } else {
      height = height - 100;
    }
    const videoUri = `${FileSystem.documentDirectory}${uuid}.mp4`;
    console.debug({
      shouldPlay: true,
      resizeMode: ResizeMode.CONTAIN,
      source: {
        uri: videoUri,
      },
    });
    try {
      return (
        <View style={{ flex: 1, backgroundColor: 'black' }}>
          <VideoPlayer
            defaultControlsVisible={true}
            fullscreen={{
              visible: false,
            }}
            slider={{
              minimumTrackTintColor: this.props.mainColor,
              thumbTintColor: this.props.mainColor,
            }}
            style={{
              height: height,
              width: width,
            }}
            videoProps={{
              shouldPlay: true,
              resizeMode: ResizeMode.CONTAIN,
              source: {
                uri: videoUri,
              },
            }}
            errorCallback={e => {
              console.error(e);
              Sentry.captureException(e);
            }}
          />
        </View>
      );
    } catch (e) {
      console.error(e);
    }
  }
}

export default connect(mapStateToProps)(VideoScreen);