import React, { Component } from "react";
import { Button, Modal, Icon, Image } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import styled from "styled-components";
//import { appActions } from "../../storeActions";

const StyledDiv = styled.div`
  background-color: #505bda;
  padding: 3rem;
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  border: none;
  position: relative;
  box-shadow: 3px 2px 10px 5px #ccc;
  transition: all 0.3s ease-out;
  :hover {
    background-color: #4345d9;
  }
  :active {
    transform: translate(0.3px, 0.8px);
    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
  }
`;

class NewSceneDevice extends Component {
  constructor(props) {
    super(props);

    this.state = {
      openModal: false,
    };
  }

  handleOpen = () => {
    this.setState({ openModal: true });
  };
  handleClose = () => {
    this.setState({ openModal: false });
  };

  resetState = () => {
    this.setState(this.baseState);
    this.handleClose();
  };

  render() {
    return (
      <Modal
        closeIcon
        open={this.state.openModal}
        onClose={this.resetState}
        trigger={
          <StyledDiv onClick={this.handleOpen}>
            <Image src="/img/add.svg" style={{ filter: "invert()" }} />
          </StyledDiv>
        }
        centered={true}
      >
        <Modal.Header>Add a New Scene Device</Modal.Header>
        <Modal.Content></Modal.Content>
        <Modal.Actions>
          <Button
            onClick={this.createDevice}
            color="blue"
            icon
            labelPosition="right"
          >
            <Icon name="up arrow" />
            Finish
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

const mapStateToProps = (state, _) => ({
  devices: Object.values(state.devices),
  activeRoom: state.active.activeRoom,
});
const NewSceneDeviceContainer = connect(
  mapStateToProps,
  RemoteService
)(NewSceneDevice);
export default NewSceneDeviceContainer;