/**
 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 Settings from "./DeviceSettings";
import {
  CircularThumbStyle,
  KnobDimmerStyle,
  KnobProgress,
  textStyle,
  knobIcon,
  knobContainer,
} from "./DimmerStyle";

export class ButtonDimmer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  increaseIntensity = () => {
    console.log("Increase!");
  };
  decreaseIntensity = () => {
    console.log("Decrease!");
  };

  componentDidMount() {}

  render() {
    return (
      <ButtonDimmerContainer>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        <img alt="icon" src="/img/buttonDimmer.svg" />
        <span className="knob">{this.props.device.name}</span>
        <PlusPanel onClick={this.increaseIntensity}>
          <span>&#43;</span>
        </PlusPanel>
        <MinusPanel onClick={this.decreaseIntensity}>
          <span>&minus;</span>
        </MinusPanel>
      </ButtonDimmerContainer>
    );
  }
}

export class KnobDimmer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pointingDevices: [],
      value: 1,
    };
  }

  componentDidMount() {}

  render() {
    return (
      <div style={knobContainer}>
        <Settings
          deviceId={this.props.device.id}
          edit={this.props.edit}
          onChangeData={(id, newSettings) =>
            this.props.onChangeData(id, newSettings)
          }
        />
        <CircularInput
          style={KnobDimmerStyle}
          value={this.state.value}
          onChange={(value) => this.setState({ value: value })}
        >
          <text
            style={textStyle}
            x={100}
            y={120}
            textAnchor="middle"
            dy="0.3em"
            fontWeight="bold"
          >
            {this.props.device.name}
          </text>
          <CircularProgress
            style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
          />
          <CircularThumb style={CircularThumbStyle} />
          <ThumbText color={"#1a2849"} />
        </CircularInput>
        <img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
      </div>
    );
  }
}