import React, {Component} from 'react';
import {Form, FormGroup, Label, Input} from 'reactstrap';
import {profileTexts} from '../../../constants/profileSettingsConstants';

class AddEditBillingAddress extends Component {
    constructor(props){
        super(props);

        const address = this.props.params.address;
        this.state = {
            id: address.id,
            firstName: address.firstName || '',
            lastName: address.lastName || '',
            invoiceMail: address.invoiceMail || '',
            idCountrySelected: address.idCountrySelected || this.props.params.countries[0].idCountry,
            city: address.city || '',
            detailedAddress: address.detailedAddress || '',
            zipCode: address.zipCode || ''
        };
        this.props.params.onAddressChange(this.state);

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

    handleChange(event) {
        const field = event.target.name;
        const address = Object.assign({}, this.state);
        address[field] = event.target.value;
        this.setState(address);
        this.props.params.onAddressChange(address);
    }

    render() {
        const {idCountrySelected, city, detailedAddress, zipCode, firstName, lastName, invoiceMail} = this.state;
        const {countries} = this.props.params;

        return (
            <div className="address-add-edit-content">
                <Form className="address-edit-content">
                    <h5>{profileTexts.labels.DELEGATE}</h5>
                    <FormGroup>
                          <Label for="address-first-name">{profileTexts.labels.FIRST_NAME}</Label>
                          <Input value={firstName}
                              autoComplete="nope"
                              onChange={this.handleChange}
                              type="text"
                              name="firstName"
                              id="address-first-name"
                              placeholder={profileTexts.labels.FIRST_NAME} />
                    </FormGroup>

                    <FormGroup>
                          <Label for="address-last-name">{profileTexts.labels.LAST_NAME}</Label>
                          <Input value={lastName}
                              autoComplete="nope"
                              onChange={this.handleChange}
                              type="text"
                              name="lastName"
                              id="address-last-name"
                              placeholder={profileTexts.labels.LAST_NAME} />
                    </FormGroup>

                    <FormGroup>
                          <Label for="address-invoice-mail">{profileTexts.labels.INVOICE_MAIL}</Label>
                          <Input value={invoiceMail}
                              autoComplete="nope"
                              onChange={this.handleChange}
                              type="text"
                              name="invoiceMail"
                              id="address-invoice-mail"
                              placeholder={profileTexts.labels.INVOICE_MAIL} />
                    </FormGroup>

                    <h5>{profileTexts.labels.BILLING_ADDRESSES}</h5>
                    <FormGroup>
                        <Label for="address-country">{profileTexts.labels.ADDRESS_COUNTRY}<span className="required-icon">*</span></Label>
                        <Input value={idCountrySelected}
                            type="select"
                            autoComplete="nope"
                            onChange={this.handleChange}
                            name="idCountrySelected"
                            id="address-country"
                            placeholder={profileTexts.labels.ADDRESS_COUNTRY}>
                            {
                                countries.map((country) =>
                                    <option key={'country-' + country.idCountry} value={country.idCountry}>{country.countryName}</option>
                                )
                            }
                        </Input>
                    </FormGroup>

                    <FormGroup>
                          <Label for="address-city">{profileTexts.labels.ADDRESS_CITY}<span className="required-icon">*</span></Label>
                          <Input value={city}
                              autoComplete="nope"
                              onChange={this.handleChange}
                              type="text"
                              name="city"
                              id="address-city"
                              placeholder={profileTexts.labels.ADDRESS_CITY} />
                    </FormGroup>

                    <FormGroup>
                          <Label for="address-details">{profileTexts.labels.ADDRESS_DETAILS}<span className="required-icon">*</span></Label>
                          <Input value={detailedAddress}
                              autoComplete="nope"
                              onChange={this.handleChange}
                              type="textarea"
                              name="detailedAddress"
                              id="address-details"
                              placeholder={profileTexts.labels.ADDRESS_DETAILS} />
                    </FormGroup>

                    <FormGroup>
                          <Label for="address-zip">{profileTexts.labels.ADDRESS_ZIP}<span className="required-icon">*</span></Label>
                          <Input value={zipCode}
                              autoComplete="nope"
                              onChange={this.handleChange}
                              type="text"
                              name="zipCode"
                              id="address-zip"
                              placeholder={profileTexts.labels.ADDRESS_ZIP} />
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

export default AddEditBillingAddress;