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() {
    const buttons = this.props.content.streams.map( (stream, i) => {
      const ytid = getYTID(stream.uri || "")
      if (! ytid) return null
      let buttonStyle, textStyle
      if (ytid === this.state.ytid) {
        buttonStyle = styles.activeButton
        textStyle = styles.activeButtonText
      }
      return (
        <Button
          key={'button_' + i}
          buttonStyle={buttonStyle}
          textStyle={textStyle}
          label={stream.text}
          onPress={() => {
            this.setState({ ytid })
          }}
        />
      )
    }).filter(button => !!button)
    const first_buttons = buttons.slice(0, 3)
    const second_buttons = buttons.slice(3)

    return (
      <ScrollableContainer heading='Livestream' bodyStyle={styles.bodyStyle}>
        <View style={styles.videoContainer} className='videoContainer'>
          <Youtube ytid={this.state.ytid} />
          <View style={styles.overlay}></View>
        </View>
        <View style={styles.buttons}>
          {first_buttons}
        </View>
        <View style={styles.buttons}>
          {second_buttons}
        </View>
        <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',
  },
})