// vim: set ts=2 sw=2 et tw=80:

import React, { Component } from "react";
import { StyledDivCamera } from "./styleComponents";
import { Grid } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { endpointURL } from "../../../endpoint";
import { connect } from "react-redux";
import VideocamModal from "./VideocamModal";

class Videocam extends Component {
  constructor(props) {
    super(props);
    this.state = { selectedVideo: undefined };
  }

  openModal = () => {
    this.setState((state) => {
      return { selectedVideo: true };
    });
  };

  closeModal = () => {
    this.setState((state) => {
      return { selectedVideo: undefined };
    });
  };

  get url() {
    return endpointURL() + this.props.device.path;
  }

  render() {
    const VideocamView = (
      <div>
        <StyledDivCamera>
          <div onClick={this.openModal}>
            <video autoPlay loop muted width="100%" height="auto">
              <source src={this.url} type="video/mp4" />
            </video>
          </div>
        </StyledDivCamera>
        <Grid columns="equal" divide padded>
          <Grid.Row textAlign="center">
            <Grid.Column>
              <VideocamModal
                selectedVideo={this.state.selectedVideo}
                closeModal={this.closeModal}
                url={this.url}
              />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    );

    return <div>{VideocamView}</div>;
  }
}

const mapStateToProps = (state, ownProps) => ({
  device: state.devices[ownProps.id],
});
const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
export default VideocamContainer;