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

import browser from './browser'

export default class Modal extends Component {
  render() {
    let style = [ styles.modal ]
    let className = 'modal'
    if (this.props.isVisible) {
      style.push(styles.visible)
      className += ' visible'
    }
    style.push( this.props.style )
    return (
      <View style={style} className={className}>
        {this.props.children}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  modal: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    overflow: 'hidden',
    zIndex: 2,
    backgroundColor: 'black',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    opacity: 0,
  },
  visible: {
    opacity: 1,
  },
})