import React from 'react';
import Modal from 'react-modal';

const VideocamModal = (props) => (
  <Modal
    isOpen={!!props.selectedVideo}
    contentLabel="Live Cam"
    onRequestClose={props.closeModal}
    style={{
      overlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.5)',
      },
      content: {
        position: 'absolute',
        top: '40px',
        left: '40px',
        right: '40px',
        bottom: '40px',
        border: '1px solid #ccc',
        background: '#fff',
        overflow: 'auto',
        WebkitOverflowScrolling: 'touch',
        borderRadius: '4px',
        outline: 'none',
        padding: '20px',
        backgroundColor: 'black',
      },
    }}
  >
    {props.selectedVideo && (
      <video autoPlay loop muted width="100%" height="90%">
        <source src={props.url} type="video/mp4" />
      </video>
    )}
  </Modal>
);

export default VideocamModal;