/**
 Users can add dimmers, a particular kind of switch that can also modify the intensity level of a given light.
 There are two types of dimmers:
 • A dimmer with state stores a given intensity level and sets the light to that level. <-- StatefulDimmer
 • A dimmer without state can just increase or decrease the intensity of a light. <-- DefualtDimmer

 The user can change the state of a dimmer through an intuitive UI in SmartHut .
 **/

import React, { Component } from "react";
import {
  CircularInput,
  CircularProgress,
  CircularThumb,
} from "react-circular-input";
import {
  ButtonDimmerContainer,
  MinusPanel,
  PlusPanel,
  ThumbText,
} from "./styleComponents";
import {
  CircularThumbStyle,
  KnobDimmerStyle,
  KnobProgress,
  textStyle,
  knobIcon,
  knobContainer,
} from "./DimmerStyle";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";

export class ButtonDimmerComponent extends Component {

  increaseIntensity = () => {
    this.props.device.buttonDimmerDim(this.props.id, "UP")
      .catch((err) => console.error('button dimmer increase error', err));
  };

  decreaseIntensity = () => {
    this.props.device.buttonDimmerDim(this.props.id, "DOWN")
      .catch((err) => console.error('button dimmer decrease error', err));
  };

  render() {
    return (
      <ButtonDimmerContainer>
        <img alt="icon" src="/img/buttonDimmer.svg" />
        <span className="knob">
          Button Dimmer
        </span>
        <PlusPanel name="UP" onClick={this.increaseIntensity}>
          <span>&#43;</span>
        </PlusPanel>
        <MinusPanel name="DOWN" onClick={this.decreaseIntensity}>
          <span>&minus;</span>
        </MinusPanel>
      </ButtonDimmerContainer>
    );
  }
}

export class KnobDimmerComponent extends Component {

  setIntensity = (newValue) => {
    const val = Math.round(newValue * 100);
    this.props.device.knobDimmerDimTok(this.props.id, val)
      .catch((err) => console.error('knob dimmer set intensity error', err));
  };

  render() {
    return (
      <div style={knobContainer}>
        <CircularInput
          style={KnobDimmerStyle}
          value={+(Math.round(this.props.device.intensity / 100 + "e+2") + "e-2")}
          onChange={this.setIntensity}
        >
          <text
            style={textStyle}
            x={100}
            y={120}
            textAnchor="middle"
            dy="0.3em"
            fontWeight="bold"
          >
            Knob Dimmer
          </text>
          <CircularProgress
            style={{ ...KnobProgress, opacity: this.props.device.intensity + 0.1 }}
          />
          <CircularThumb style={CircularThumbStyle} />
          <ThumbText color={"#1a2849"} />
        </CircularInput>
        <img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
      </div>
    );
  }
}

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

export const KnobDimmer = conn(KnobDimmerComponent);
export const ButtonDimmer = conn(ButtonDimmerComponent);