import React from 'react';
import Modal from 'react-modal';
import { Button } from 'semantic-ui-react';

const modal = {
  opacity: 0,
  alignItems: 'center',
  display: 'flex',
  justifyContent: 'center',
  transition: 'opacity 200ms ease-in-out',
  background: 'grey',
  color: 'white',
  maxWidth: '2rem',
  outline: 'none',
  padding: '2rem',
  textAlign: 'center',
  maxHeight: '50vh',
};

const VideocamModal = (props) => (
  <Modal
    isOpen={!!props.selectedVideo}
    contentLabel="Live Cam"
    onRequestClose={props.closeModal}
    style={modal}
  >
    {props.selectedVideo && (
      <video autoPlay loop muted width="100%" height="90%">
        <source src={props.url} type="video/mp4" />
      </video>
    )}
    <Button fluid primary onClick={props.closeModal}>
      Close
    </Button>
  </Modal>
);

export default VideocamModal;