import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../store/Computers';
import { Link } from 'react-router-dom';
import { Button, FormGroup, Label } from 'reactstrap';
import { AvForm, AvGroup, AvInput, AvFeedback } from 'availity-reactstrap-validation';

class ComputerEdit extends Component {

    constructor(props) {
        super(props);
        this.state = {
            id: this.props.match.params.id,
            manufacture: this.props.computer.manufacture,
            model: this.props.computer.model,
            weight: this.props.computer.weight,
            graphicCard: this.props.computer.graphicCard,
            diagonal: this.props.computer.diagonal,
            displayResolution: this.props.computer.displayResolution,
            processor: this.props.computer.processor,
            os: this.props.computer.os,
            rom: this.props.computer.rom,
            ram: this.props.computer.ram,
            color: this.props.computer.color,
            price: this.props.computer.price,
            information: this.props.computer.information
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentWillMount() {
        this.props.getComputer(this.props.match.params.id);
    }

    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
    };

    handleSubmit(event) {
        event.preventDefault();
        this.props.editComputer(this);
    }

    render() {
        return (
            <div>
                <h1>Kompiuterio redagavimas</h1>
                <AvForm onValidSubmit={this.handleSubmit}>
                    <AvGroup>
                        <Label>Gamintojas</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="manufacture" defaultValue={this.props.computer.manufacture} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Modelis</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="model" defaultValue={this.props.computer.model} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Svoris</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="weight" defaultValue={this.props.computer.weight} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Vaizdo plokštė</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="graphicCard" defaultValue={this.props.computer.graphicCard} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Įstrižainė</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="diagonal" defaultValue={this.props.computer.diagonal} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Ekrano raiška</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="displayResolution" defaultValue={this.props.computer.displayResolution} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Procesorius</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="processor" defaultValue={this.props.computer.processor} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Operacinė sistema</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="os" defaultValue={this.props.computer.os} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>ROM atmintis</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="rom" defaultValue={this.props.computer.rom} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>RAM atmintis</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="ram" defaultValue={this.props.computer.ram} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Spalva</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="color" defaultValue={this.props.computer.color} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Kaina</Label><br />
                        <AvInput style={{ width: "400px" }} type="string" name="price" defaultValue={this.props.computer.price} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <AvGroup>
                        <Label>Papildoma informacija</Label><br />
                        <AvInput style={{ width: "400px" }} type="textarea" name="information" defaultValue={this.props.computer.information} onChange={this.handleChange} required />
                        <AvFeedback>Užpildykite įvedimo lauką!</AvFeedback>
                    </AvGroup>
                    <FormGroup>
                        <Button color="primary" type="submit">Redaguoti</Button>{' '}
                        <Button color="secondary" tag={Link} to="/computers/list">Atšaukti</Button>
                    </FormGroup>
                </AvForm>
            </div>
        );
    }
}

export default connect(
    state => state.computers,
    dispatch => bindActionCreators(actionCreators, dispatch),
)(ComputerEdit);