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 .3s ease-out;
  :hover{
    background-color : #ff2436;
  }
`;

export default class NewDevice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 1,
      openModal : 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) => {
    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.typeOfDevice

    }

    switch(this.state.typeOfDevice) {
      case "dimmableLight":
        data.params["intensity"] = 1;
        break;
      case "sensor":
        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>
    )
  }
}