import React, { Component } from 'react';
import './index.scss';

class Buttons extends Component {
    render() {
        console.log(this.props.item.title0)
        return (
            <div>

                <div className="row">
                    <div className="col-sm-6">
                        <label>-{this.props.index + 1}{'.1'} - Title</label>
                    </div>
                    <div className="col-sm-6">
                        <input
                            type="text"
                            name={this.props.origin !== 'gallery' ? 'title' : 'title' + this.props.index}
                            value={this.props.item[`title${this.props.index}`]}
                            onChange={this.props.onChange.bind(this, this.props.index)}
                        />
                    </div>
                </div>
                <div className="row">
                    <div className="col-sm-6">
                        <label>-{this.props.index + 1}{'.2'} - Value</label>
                    </div>
                    <div className="col-sm-6">
                        <input
                            type="text"
                            name={this.props.origin !== 'gallery' ? 'value' : 'value' + this.props.index}
                            value={this.props.item[`value${this.props.index}`]}
                            onChange={this.props.onChange.bind(this, this.props.index)}
                        />
                    </div>
                </div>
                <div className="row">
                    <div className="col-sm-6">
                        <label>-{this.props.index + 1}{'.3'} - Pointer</label>
                    </div>
                    <div className="col-sm-6">
                        <input
                            type="number"
                            name={this.props.origin !== 'gallery' ? 'pointer' : 'pointer' + this.props.index}
                            value={this.props.item[`pointer${this.props.index}`]}
                            onChange={this.props.onChange.bind(this, this.props.index)}
                        />
                    </div>
                </div>
                <div className="row">
                    <div className="col-sm-6">
                        <label>-{this.props.index + 1}{'.4'} - Target URL</label>
                    </div>
                    <div className="col-sm-6">
                        <input
                            type="text"
                            name={this.props.origin !== 'gallery' ? 'targetUrl' : 'targetUrl' + this.props.index}
                            value={this.props.item[`targetUrl${this.props.index}`]}
                            onChange={this.props.onChange.bind(this, this.props.index)}
                        />
                    </div>
                </div>
                {this.props.origin !== 'gallery' &&
                <div className="row">
                    <div>
                        <button type="button" onClick={() => this.props.onClickRemove(this.props.index)} className="btn btn-secondary btn-sm btn-danger">Remove Button</button>
                    </div>
                </div>
                }
                <div>
                &nbsp;
                </div>
            </div>
        );
    }
}

export default Buttons;