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

import Lang from 'components/Language';

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

export default class ConfirmationsSettings extends Component {
    render() {
        const {confirmations = {}} = this.props;
        return (
            <div className="settings-confirmations">
                <div className="settings-row">
                    <div className="settings-description">
                        <Lang>SETTING_CONFIRM_DESC</Lang>
                    </div>
                    <div className="settings-description">
                        <Lang>SETTING_CONFIRM_SUB_DESC</Lang>
                    </div>
                </div>
                <div className="settings-row">
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTING_POSITION_OPENING</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={confirmations.open} onChange={value => {
                                setConfirmation({type: "open", value})
                            }}/>
                        </div>
                    </div>
                    {/*<div className="settings-item">*/}
                        {/*<div className="label">*/}
                            {/*<Lang>SETTING_POSITION_MODIFY</Lang>*/}
                        {/*</div>*/}

                        {/*<div className="value">*/}
                            {/*<StateBar enable={confirmations.modify} onChange={value => {*/}
                                {/*setConfirmation({type: "modify", value})*/}
                            {/*}}/>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTING_POSITION_CLOSE</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={confirmations.close} onChange={value => {
                                setConfirmation({type: "close", value})
                            }}/>
                        </div>
                    </div>
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTING_POSITION_CLOSE_ALL</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={confirmations.close_all} onChange={value => {
                                setConfirmation({type: "close_all", value})
                            }}/>
                        </div>
                    </div>
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTING_POSITION_CLOSE_GROUP</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={confirmations.close_group} onChange={value => {
                                setConfirmation({type: "close_group", value})
                            }}/>
                        </div>
                    </div>
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTING_POSITION_REVERSE</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={confirmations.reverse} onChange={value => {
                                setConfirmation({type: "reverse", value})
                            }}/>
                        </div>
                    </div>
                    <div className="settings-item">
                        <div className="label">
                            <Lang>SETTING_POSITION_DOUBLE</Lang>
                        </div>
                        <div className="value">
                            <StateBar enable={confirmations.double} onChange={value => {
                                setConfirmation({type: "double", value})
                            }}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}