import React, { Component } from "react";
import { Button, Modal, Icon, Image, Form, Dropdown } 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,
      sceneDevices: this.props.scene ? this.props.scene.sceneStates : {},
      deviceName: "",
    };
    this.getDevices();

    this.setSceneState = this.setSceneState.bind(this);
    this.createState = this.createState.bind(this);
  }

  getDevices() {
    this.props
      .fetchDevices()
      .catch((err) => console.error(`error fetching devices:`, err));
  }

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

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

  setSceneState(e, d) {
    this.setState({ devicesAttached: d.value });
  }

  createState() {
    for (let i = 0; i < this.state.devicesAttached.length; i++) {
      let device = this.props.devices.filter(
        (e) => this.state.devicesAttached[i] === e.id
      );
      let data = {
        sceneId: this.props.activeScene,
        id: device[0].id,
        kind: device[0].kind,
      };
      this.props
        .saveState(data)
        .catch((err) => console.error("error in creating state", err));
    }
    this.resetState();
  }

  render() {
    const availableDevices = [];
    this.props.devices.forEach((e) => {
      if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
        if (e.flowType === "OUTPUT") {
          availableDevices.push({
            key: e.id,
            text: e.name,
            value: e.id,
          });
        }
      }
    });
    return (
      <Modal
        closeIcon
        open={this.state.openModal}
        onClose={this.resetState}
        trigger={
          <StyledDiv
            onClick={this.handleOpen}
            style={{
              position: "relative",
              top: "calc(50% - 5rem)",
              left: "calc(50% - 5rem)",
            }}
          >
            <Image src="/img/add.svg" style={{ filter: "invert()" }} />
          </StyledDiv>
        }
        centered={true}
      >
        <Modal.Header>Add a New Scene State</Modal.Header>
        <Modal.Content>
          <Form>
            <Form.Field style={{ marginTop: "1rem" }}>
              <label>Select devices you want to attach: </label>
              <Dropdown
                name="scene devices"
                placeholder="Select Devices"
                fluid
                multiple
                onChange={this.setSceneState}
                options={availableDevices}
              />
            </Form.Field>
          </Form>
        </Modal.Content>
        <Modal.Actions>
          <Button
            onClick={this.createState}
            color="blue"
            icon
            labelPosition="right"
          >
            <Icon name="up arrow" />
            Finish
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

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