import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Button} from 'reactstrap';
import ProfileAddress from './components/ProfileAddress.jsx';
import SelectDeliveryAddress from '../cart/components/SelectDeliveryAddress.jsx';
import AddEditProfileAddress from './components/AddEditProfileAddress.jsx';
import RemoveProfileAddress from './components/RemoveProfileAddress.jsx';
import {profileTexts} from '../../constants/profileSettingsConstants';
import {setDialogContent, setDialogOpenFlag} from '../../actions/dialog/dialogActions';
import {saveProfileAddress, removeProfileAddress} from '../../actions/profileSettings/addressActions';
import './style/AddressesContainer.css';
import { updateMessages } from '../../actions/notification/notificationActions';

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

        this.changedAddress = {};

        this.openAddressDialog = this.openAddressDialog.bind(this);
        this.onAddressChange = this.onAddressChange.bind(this);
    }

    saveProfileAddress(profileAddress){
        const messages = [];
        if (!profileAddress.zipCode){
            messages.push({
                'code':'error',
                'message':'ADD_ZIP'
            });
        }
        if (!profileAddress.detailedAddress){
            messages.push({
                'code':'error',
                'message':'ADD_ADDRESS'
            });
        }
        if (!profileAddress.city){
            messages.push({
                'code':'error',
                'message':'ADD_CITY'
            });
        }
        if (messages.length > 0){
            this.props.dispatch(updateMessages(messages, profileTexts.messages));
        }else{
            this.props.dispatch(saveProfileAddress(this.props.idUser, profileAddress));
        }
    }

    onAddressChange(address){
        this.changedAddress = Object.assign({}, address);
    }

    removeProfileAddress(profileAddress){
        this.props.dispatch(removeProfileAddress(this.props.idUser, profileAddress.id));
    }

    getDialogContent(action, profileAddress){
        if(action === 'add'){
            return {
                buttons: [
                    {
                        color: 'secondary',
                        name: profileTexts.buttons.SAVE ,
                        id: 'save-profile-address-btn',
                        action: () => {this.saveProfileAddress(this.changedAddress)},
                        waitForAction: true
                    },
                    {
                        color: 'secondary',
                        name: profileTexts.buttons.CANCEL,
                        id: 'cancel-profile-address-btn'
                    }
                ],
                header: profileTexts.labels.ADD_PROFILE_ADDRESS,
                TagName: AddEditProfileAddress,
                class: 'address-dialog',
                params: {profileAddress: {}, countries: this.props.countries, onAddressChange: this.onAddressChange}
            };
        }else if(action === 'edit'){
            return {
                buttons: [
                    {
                        color: 'secondary',
                        name: profileTexts.buttons.SAVE ,
                        id: 'save-profile-address-btn',
                        action: () => {this.saveProfileAddress(this.changedAddress)},
                        waitForAction: true
                    },
                    {
                        color: 'secondary',
                        name: profileTexts.buttons.CANCEL,
                        id: 'cancel-profile-address-btn'
                    }
                ],
                header: profileTexts.labels.EDIT_PROFILE_ADDRESS,
                TagName: AddEditProfileAddress,
                class: 'address-dialog',
                params: {profileAddress, countries: this.props.countries, onAddressChange: this.onAddressChange}
            };
        }else if(action === 'remove'){
            return{
                buttons: [
                    {
                        color: 'secondary',
                        name: profileTexts.buttons.YES ,
                        id: 'remove-profile-address-btn',
                        action: () => {this.removeProfileAddress(profileAddress)}
                    },
                    {
                        color: 'secondary',
                        name: profileTexts.buttons.NO,
                        id: 'cancel-remove-profile-address-btn'
                    }
                ],
                header: profileTexts.labels.REMOVE_PROFILE_ADDRESS,
                TagName: RemoveProfileAddress,
                params: {profileAddress}
            };
        }else{
            return {};
        }
    }

    openAddressDialog(action, profileAddress) {
        const dialogContent = this.getDialogContent(action, profileAddress);

        this.props.dispatch(setDialogOpenFlag(true));
        this.props.dispatch(setDialogContent(dialogContent));
    }

    render() {
        const {profileInfo} = this.props;
        const { location, handleDeliveryChange, idSelectedDeliveryAddress} = this.props.params || '';
        const TagName = location === 'cart' ? SelectDeliveryAddress :  ProfileAddress;

        return (
            <div>
                <div id="profile-addresses" className="user-addresses edit-content">
                    <Row>
                        <Col>
                            <h5>{profileTexts.labels.PROFILE_ADDRESSES}</h5>
                            <Button color="secondary"
                                    onClick={() => {this.openAddressDialog('add')}}
                                    className="add-address-btn wiaas-button">
                                    <i className="fa fa-plus" aria-hidden="true"></i> {' '} {profileTexts.buttons.ADD_ADDRESS}
                            </Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <div>
                                {
                                    (profileInfo && profileInfo.profileAddresses && profileInfo.profileAddresses.length > 0 ) &&
                                    profileInfo.profileAddresses.map(address =>
                                        <TagName key={'address-'+ address.id}
                                            idSelectedDeliveryAddress={idSelectedDeliveryAddress}
                                            handleDeliveryChange={handleDeliveryChange}
                                            openAddressDialog={this.openAddressDialog}
                                            profileAddress={address}/>)
                                }
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    profileInfo: state.profileSettingsReducer.profileInfo,
    countries: state.profileSettingsReducer.countries
});
export default connect(mapStateToProps)(ProfileAddressesContainer);