import React, {Component} from "react";
import {Provider} from "sbx-react-core";
import StateBar from "components/StateBar";
import {setSound} from "actions/Interface";

import Lang from 'components/Language';

import {setSetting} from "actions/Settings";

import Icon from "sbx-react-icon";

const soundOff = require("../icons/soundOff.svg");
const soundOn = require("../icons/soundOn.svg");

let timer;

@Provider({
    sound: ["settings", "sound"]
})

export default class GeneralSettings extends Component {
    state = {
        value: this.props.sound || 0
    };
    render() {
        return (
            <div className="settings-confirmations">
                <div className="settings-row">
                    <div className="settings-description">
                        <Lang>SETTINGS_SOUND_TITLE</Lang>
                    </div>
                </div>
                <div className="settings-row">
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTINGS_VOLUME</Lang>
                        </div>
                        <div className="value sound-bar">
                            <Icon
                                src={soundOff}
                                onClick={() => {
                                    this.setState({value: 0});
                                    setSetting({setting:"sound", value:0});
                                }}
                            />
                            <input
                                value={this.state.value}
                                type="range"
                                min={0}
                                max={1}
                                step={0.01}
                                onChange={e => {
                                    clearTimeout(timer);
                                    let value = e.target.value;
                                    this.setState({
                                        value: value
                                    });
                                    timer = setTimeout(()=>{
                                        setSetting({setting:"sound", value:value})
                                    }, 300)
                                }}
                            />
                            <Icon
                                src={soundOn}
                                onClick={() => {
                                    this.setState({value: 1});
                                    setSetting({setting:"sound", value:1});
                                }}
                            />
                        </div>
                    </div>
                </div>
                </div>
        )
    }
}