import React, { Component } from 'react';
import {
  StyleSheet,
  View
} from 'react-native';

import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'
import Button from '../components/button'
import Youtube from '../components/youtube'

export default class Livestream extends Component {
  constructor(props) {
    super()
    this.state = {
      ytid: isMobile ? "" : getYTID(choice(props.content.streams).uri),
      isReady: false,
      currentTime: 0,
      duration: 0,
      quality: 0,
      status: 'unloaded',
      error: null,
    }
  }
  render() {
    return (
      <ScrollableContainer heading='Livestream' bodyStyle={styles.bodyStyle}>
        <View style={styles.contentContainer}>
          <ClearText style={styles.body}>{this.props.content.body}</ClearText>
        </View>
      </ScrollableContainer>
    )
  }
}

function randint(n){ return Math.floor(Math.random() * n) }
function choice(a){ return a[randint(a.length)] }
function getYTID(url) {
  return (
     url.match(/v=([-_a-zA-Z0-9]{11})/i)
  || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i)
  || url.match(/embed\/([-_a-zA-Z0-9]{11})/i)
  )[1].split('&')[0];
}

const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
const isIpad = (navigator.userAgent.match(/iPad/i))
const isAndroid = (navigator.userAgent.match(/Android/i))
const isMobile = isIphone || isIpad || isAndroid
const isDesktop = ! isMobile

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  bodyStyle: {
    flex: 1,
  },
  body: {
    textAlign: 'left',
    marginTop: 40,
    width: '75%',
    paddingBottom: 100,
  },
  contentContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%',
  },
  videoContainer: {
    justifyContent: 'flex-start',
    height: isMobile ? 0 : 400,
    width: '100%',
    padding: 10,
  },
  video: {
    alignSelf: 'stretch',
    height: isMobile ? 0 : 400,
    width: '100%',
    backgroundColor: 'black',
    marginVertical: 10
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0)'
  },
  buttons: {
    width: '100%',
    paddingTop: 20,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  secondButtons: {
    paddingTop: 0,
  },
  button: {
    marginTop: 0,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 0,
  },
  activeButtonText: {
    color: 'red',
  },
  activeButton: {
    backgroundColor: '#bbb',
    borderBottomColor: '#888',
  },
})