import React, { Component } from "react";
import styled from "styled-components";
import {
  Button,
  Dropdown,
  Form,
  Icon,
  Image,
  Input,
  Modal,
} from "semantic-ui-react";

const StyledDiv = styled.div`
  background-color: #ff4050;
  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: #ff2436;
  }
`;

export default class NewDevice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 1,
      openModal: false,
      motion: false,
    };
    this.baseState = this.state;
    this.createDevice = this.createDevice.bind(this);
  }

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

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

  nextStep = () => {
    this.setState((prevState) => ({ step: prevState.step + 1 }));
  };
  previousStep = () => {
    this.setState((prevState) => ({ step: prevState.step - 1 }));
  };

  setTypeOfDevice = (e, d) => {
    if (d.value === "dimmableLight") {
      this.setState({ typeOfDevice: d.value, intensity: 0 });
    } else {
      this.setState({ typeOfDevice: d.value });
    }
  };

  setDeviceName = (e, d) => {
    this.setState({ deviceName: d.value });
  };

  setTypeOfSensor = (e, d) => {
    console.log(d.value);
    if (d.value === "motionSensor") {
      this.setState({ typeOfSensor: d.value, motion: true });
    } else {
      this.setState({ typeOfSensor: d.value });
    }
  };

  setLightsDimmerSwitch = (e, d) => {
    this.setState({ lightsAttached: d.value });
  };

  createDevice() {
    // Connect to the backend and create device here.
    const data = {
      params: {
        name: this.state.deviceName,
      },
      device: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
    };

    switch (this.state.typeOfDevice) {
      case "dimmableLight":
        data.params["intensity"] = 1;
        break;
      case "sensor":
        if (!this.state.motion) {
          data.params["sensor"] = this.state.typeOfSensor;
          data.params["value"] = 0;
        }
        break;
      case "switch":
        data.params["lights"] = this.state.lightsAttached;
        break;
      default:
        break;
    }
    console.log(data);
    this.props.addDevice(data);
    this.resetState();
  }

  render() {
    const deviceOptions = [
      {
        key: "light",
        text: "Normal Light",
        value: "regularLight",
        image: { avatar: true, src: "/img/lightOn.svg" },
      },
      {
        key: "intensity-light",
        text: "Intensity Light",
        value: "dimmableLight",
        image: { avatar: true, src: "/img/intensity-light.svg" },
      },
      {
        key: "smart-plug",
        text: "Smart Plug",
        value: "smartPlug",
        image: { avatar: true, src: "/img/smart-plug.svg" },
      },
      {
        key: "sensor",
        text: "Sensor",
        value: "sensor",
        image: { avatar: true, src: "/img/sensorOn.svg" },
      },
      {
        key: "switch",
        text: "Switch",
        value: "switch",
        image: { avatar: true, src: "/img/switchOn.svg" },
      },
      {
        key: "dimmer",
        text: "Dimmer",
        value: "buttonDimmer",
        image: { avatar: true, src: "/img/dimmer.svg" },
      },
    ];
    const sensorOptions = [
      {
        key: "temperature",
        text: "Temperature Sensor",
        value: "TEMPERATURE",
        image: { avatar: true, src: "/img/temperature-sensor.svg" },
      },
      {
        key: "humidity",
        text: "Humidity Sensor",
        value: "HUMIDITY",
        image: { avatar: true, src: "/img/humidity-sensor.svg" },
      },
      {
        key: "light",
        text: "Light Sensor",
        value: "LIGHT",
        image: { avatar: true, src: "/img/light-sensor.svg" },
      },
      {
        key: "motion",
        text: "Motion Sensor",
        value: "motionSensor",
        image: { avatar: true, src: "/img/sensorOn.svg" },
      },
    ];
    const availableLights = [];
    this.props.devices.forEach((d) => {
      availableLights.push({
        key: d.id,
        text: d.name,
        value: d.id,
      });
    });
    const step1 = (
      <Dropdown
        name="typeOfDevice"
        placeholder="Select a Type of Device"
        fluid
        selection
        onChange={this.setTypeOfDevice}
        options={deviceOptions}
      />
    );
    const step2 = (typeOfDevice) => {
      const deviceName = (
        <div>
          <Form.Field>
            <label>Device Name: </label>
            <Input
              fluid
              size={"large"}
              onChange={this.setDeviceName}
              focus
              placeholder="Device Name"
            />
          </Form.Field>
        </div>
      );
      const sensorForm = (
        <Form.Field style={{ marginTop: "1rem" }}>
          <label>Type of Sensor: </label>
          <Dropdown
            name="typeOfDevice"
            placeholder="Select a Type of Sensor"
            fluid
            selection
            onChange={this.setTypeOfSensor}
            options={sensorOptions}
          />
        </Form.Field>
      );
      const switchDimmerOptions = (
        <Form.Field style={{ marginTop: "1rem" }}>
          <label>Select the Lights You Want to Attach: </label>
          <Dropdown
            name="typeOfDevice"
            placeholder="Select Lights"
            fluid
            multiple
            onChange={this.setLightsDimmerSwitch}
            options={availableLights}
          />
        </Form.Field>
      );
      return (
        <Form>
          {deviceName}
          {this.state.typeOfDevice === "sensor" ? sensorForm : ""}
          {this.state.typeOfDevice === "switch" ||
          this.state.typeOfDevice === "dimmer"
            ? switchDimmerOptions
            : ""}
        </Form>
      );
    };
    const steps = [step1, step2()];
    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 Device</Modal.Header>
        <Modal.Content>{steps[this.state.step - 1]}</Modal.Content>
        <Modal.Actions>
          {this.state.step > 1 ? (
            <Button
              onClick={this.previousStep}
              color="blue"
              icon
              labelPosition="left"
            >
              <Icon name="left arrow" />
              Back
            </Button>
          ) : (
            ""
          )}
          {this.state.step < steps.length ? (
            <Button
              color="blue"
              onClick={this.nextStep}
              icon
              labelPosition="right"
            >
              Next
              <Icon name="right arrow" />
            </Button>
          ) : (
            ""
          )}
          {this.state.step === steps.length ? (
            <Button
              onClick={this.createDevice}
              color="blue"
              icon
              labelPosition="right"
            >
              <Icon name="up arrow" />
              Finish
            </Button>
          ) : (
            ""
          )}
        </Modal.Actions>
      </Modal>
    );
  }
}