import React, { Component } from "react";
import "./Curtains.css";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";

class Curtain extends Component {
    constructor(props) {
        super(props);
        this.state = { intensity: this.props.stateOrDevice.intensity, timeout: null };

        this.setIntensity = this.setIntensity.bind(this);
    }

    //getters
    get turnedOn() {
        return this.props.stateOrDevice.on;
    }

    get intensity() {
        return this.props.stateOrDevice.intensity || 0;
    }

    onClickDevice = () => {
        const on = !this.turnedOn;
        if(this.props.tab==="Devices"){
            this.props
                .saveDevice({ ...this.props.stateOrDevice, on })
                .catch((err) => console.error("curtains update error", err));
        }else{
            this.props.updateState({ id: this.props.sceneState.id, on: on },this.props.sceneState.kind);
        }
    };

    setIntensity(intensity) {
        intensity *= 100;

        if (this.state.timeout) {
            clearTimeout(this.state.timeout);
        }

        this.setState({
            intensity,
            timeout: setTimeout(() => {
                this.saveIntensity();
                this.setState({
                    intensity: this.state.intensity,
                    timeout: null,
                });
            }, 100),
        });
    }

    saveIntensity = () => {
        const intensity = Math.round(this.state.intensity);
        if(this.props.tab==="Devices"){
            this.props
                .saveDevice({ ...this.props.stateOrDevice, intensity })
                .catch((err) => console.error("curtain update error", err));
        }else{
            this.props.updateState({ id: this.props.sceneState.id, intensity: intensity },this.props.sceneState.kind);
        }
    };

    helper = () => {
        if (this.props.device.intensity >= 90) {
            this.setIntensity(1);
            this.saveIntensity();
        } else {
            this.setIntensity(this.props.stateOrDevice.intensity / 100 + 0.1);
            this.saveIntensity();
        }
    };


    ///*this took me way too much more time than it should have*/

    handleChange = (a) => {
        this.setIntensity(a.target.value / 100);
        this.saveIntensity();
    };

    render() {
        return (
            <div className="container">
                <div
                    className="open-container"
                    style={{
                        height: (9 * this.props.stateOrDevice.intensity) / 100 + "rem",
                    }}
                ></div>{" "}
                <span className="span-open">
                    {Math.round(this.props.stateOrDevice.intensity)}%
                </span>
                <input
                    onChange={this.handleChange}
                    value={this.props.stateOrDevice.intensity}
                    className="slider"
                    type="range"
                    min="0"
                    max="100"
                />
            </div>

        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    get stateOrDevice(){
        if(state.active.activeTab==="Devices"){
            return state.devices[ownProps.id];
        }else{
            return state.sceneStates[ownProps.id];
        }
    },
    //device: state.devices[ownProps.id],
});
const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
export default CurtainContainer;