import React from 'react';
import './VehicleOwnerForm.css';
import validator from 'validator';
import axios from 'axios';
import VehicleFormList from '../Vehicle/VehicleFormList';
import CardFormList from '../Card/CardFormList';
import ReactPhoneInput from 'react-phone-input-2';
import {
    Button,
    Col,
    Container,
    Form,
    Input,
    InputGroup,
    InputGroupAddon,
    Label,
    Row,
    Popover,
    PopoverBody
} from 'reactstrap';
import NavbarComponent from "../../NavbarComponent/NavbarComponent";
import {AUTHORIZATION, GARAGE, VEHICLE_LOGIN_ROUTE} from "../../Text/constants"
import cloneDeep from 'lodash.clonedeep';
import {getHeader} from "../../AuthorizationConfig/GetHeader";
import _request from "../../AuthorizationConfig/AuthRequest";
import moment from "moment";

class VehicleOwnerForm extends React.Component {

    state = {
        name: {value: '', isValid: true, message: ''},
        surname: {value: '', isValid: true, message: ''},
        dateOfBirth: {value: '', isValid: true, message: ''},
        gender: {value: 'male', isValid: true, message: ''},
        email: {value: '', isValid: true, message: ''},
        phone: {value: '', isValid: true, message: ''},
        password: {value: '', isValid: true, message: ''},
        repeatedPassword: {value: '', isValid: true, message: ''},
        vehicles: [
            {
                registration: {value: '', isValid: true, message: ''},
                type: {value: 'car', isValid: true, message: ''},
                isAdded: false
            }
        ],
        activeCard: {iban: {value: '', isValid: true, message: ''}},
        cards: [
            {
                iban: {value: '', isValid: true, message: ''},
                isAdded: false
            }
        ],
        vehicleTypes: []
    };

    componentDidMount() {
        _request(GARAGE + 'garage/vehicleTypes', 'get')
            .then(resp => {
                this.setState({vehicleTypes: resp.data.map(type => type.type)})
            })
            .catch(() => alert('Garage service unavailable!'))
    }

    addVehicle = (uid) => {
        let vehicles = cloneDeep(this.state.vehicles);
        vehicles[uid].isAdded = true;
        vehicles[uid].registration.value = vehicles[uid].registration.value.toUpperCase();

        vehicles.push({
            registration: {value: '', isValid: true, message: ''},
            type: {value: 'car', isValid: true, message: ''},
            isAdded: false
        });

        this.setState({
            vehicles: vehicles
        })
    };

    removeVehicle = uid => {
        let vehicles = cloneDeep(this.state.vehicles);
        vehicles.splice(uid, 1);
        this.setState({
            vehicles: vehicles
        })
    };

    handleOnChangeVehicle = event => {
        let vehicles = cloneDeep(this.state.vehicles);
        vehicles[event.target.id] = {
            ...vehicles[event.target.id],
            [event.target.name]: {
                value: event.target.value,
                isValid: true,
                isAdded: false,
                message: ''
            }
        };

        this.setState({
            vehicles: vehicles
        })
    };


    addCard = uid => {
        let cards = cloneDeep(this.state.cards);

        if (!cards[uid].iban.value.match('\\b[A-Z]{2}[0-9]{2}(?:[ ]?[0-9]{4}){4}(?!(?:[ ]?[0-9]){3})(?:[ ]?[0-9]{1,2})?\\b')) {
            cards[uid].iban.isValid = false;
            cards[uid].iban.message = 'Invalid IBAN format.';
        } else {
            cards[uid].isAdded = true;
            cards.push({
                iban: {value: '', isValid: true, message: ''},
                isAdded: false
            });
        }

        this.setState({
            cards: cards
        })
    };

    removeCard = uid => {
        let cards = cloneDeep(this.state.cards);
        cards.splice(uid, 1);
        this.setState({
            cards: cards
        })
    };

    handleOnChangeCard = event => {
        let cards = cloneDeep(this.state.cards);
        cards[event.target.id] = {
            iban:
                {
                    value: event.target.value,
                    isValid: true,
                    isAdded: false,
                    message: ''
                }
        };

        this.setState({
            cards: cards
        })
    };

    handleSubmit = () => {
        if (this.formIsValid()) {

            const {name, surname, phone, email, password, vehicles, cards, dateOfBirth, gender} = this.state;

            axios.post(
                AUTHORIZATION + 'user/register/vehicleOwner',
                {
                    user: {
                        name: name.value,
                        surname: surname.value,
                        email: email.value,
                        password: password.value,
                        phone: phone.value,
                        dateOfBirth: dateOfBirth.value,
                        gender: gender.value
                    },
                    vehicles: vehicles.slice().filter(vehicle => vehicle.registration.value !== '').map(vehicle => {
                        return {
                            registration: vehicle.registration.value,
                            type: vehicle.type.value
                        };
                    }),
                    bankAccounts: cards[0].iban.value !== '' ?
                        cards.slice().filter(card => card.iban.value !== '').map(card => {
                            return {
                                iban: card.iban.value,
                            }
                        }) : null
                }, {headers: getHeader()})
                .then(
                    () => this.props.history.push('/login?mode=vehicle_owner')
                ).catch(error => {
                    if (error.response.data && error.response.data.exceptions) {
                        Object.keys(error.response.data.exceptions).forEach(key => {
                            if (key === 'iban') {
                                this.setState({
                                    cards: [
                                        {
                                            iban: {
                                                value: '',
                                                isValid: false,
                                                message: error.response.data.exceptions[key]
                                            },
                                            isAdded: false
                                        }
                                    ]
                                });
                                alert("IBAN given is not valid!");
                            } else if (key === 'registration') {
                                this.setState({
                                    vehicles: [
                                        {
                                            registration: {value: '', isValid: false, message: error.response.data.exceptions[key]},
                                            type: {value: 'car', isValid: true, message: ''},
                                            isAdded: false
                                        }
                                    ]
                                })
                            } else {
                                this.setState({
                                    [key]: {
                                        isValid: false,
                                        value: '',
                                        message: error.response.data.exceptions[key]
                                    }
                                });
                            }
                        })
                    }
                });
        } else {
            alert("Given data is not valid. Try again!");
        }

    };

    formIsValid = () => {
        let validationFlag = true;
        let state = cloneDeep(this.state);

        if (!validator.isEmail(state.email.value)) {
            state.email.isValid = false;
            state.email.message = 'Not a valid email address.';
            validationFlag = false;
        } else {
            state.email.isValid = true;
            state.email.message = '';
        }

        if (!state.name.value.match(/^[A-Za-zčćžđšČĆŽĐŠ\s]+$/)) {
            state.name.isValid = false;
            state.name.message = 'First name should contains only letters.';
            validationFlag = false;
        } else {
            state.name.isValid = true;
            state.name.message = '';
        }

        if (!state.surname.value.match(/^[A-Za-zčćžđšČĆŽĐŠ\s]+$/)) {
            state.surname.isValid = false;
            state.surname.message = 'Last name should contains only letters.';
            validationFlag = false;
        } else {
            state.surname.isValid = true;
            state.surname.message = '';
        }

        if (state.password.value.length < 8) {
            state.password.isValid = false;
            state.password.message = 'Password is too short. Minimum length is 8 characters.';
            validationFlag = false;
        } else {
            state.password.isValid = true;
            state.password.message = '';
        }

        if (state.password.value !== state.repeatedPassword.value) {
            state.repeatedPassword.isValid = false;
            state.repeatedPassword.message = 'Incorrect password. Please repeat password.';
            validationFlag = false;
        } else {
            state.repeatedPassword.isValid = true;
            state.repeatedPassword.message = '';
        }

        if (state.vehicles.length === 1 && state.vehicles[0].registration.value === '') {
            state.vehicles[0].registration.message = 'This field is required';
            state.vehicles[0].registration.isValid = false;
            validationFlag = false;
        }

        let yearDiff = this.calculateYearDifference();

        if (moment().isBefore(moment(this.state.dateOfBirth.value)._i)){
            state.dateOfBirth.isValid = false;
            state.dateOfBirth.message = "Invalid date of birth.";
            validationFlag = false;
        } else if (yearDiff > 150) {
            state.dateOfBirth.isValid = false;
            state.dateOfBirth.message = "You are too old.";
            validationFlag = false;
        } else if (yearDiff < 18) {
            state.dateOfBirth.isValid = false;
            state.dateOfBirth.message = "You have to be at least 18 years old.";
            validationFlag = false;
        } else {
            state.dateOfBirth.isValid = true;
            state.dateOfBirth.message = '';
        }

        Object.keys(state).forEach(key => {
            if(key === 'dateOfBirth' || key === 'phone' || key === 'vehicles' || key === 'vehicleTypes' || key === 'activeCard') return;

            if(key === 'cards'){
                state[key].forEach(c => {
                    if (!c.isAdded) {
                        return;
                    }

                    if (!c.iban.value.match('\\b[A-Z]{2}[0-9]{2}(?:[ ]?[0-9]{4}){4}(?!(?:[ ]?[0-9]){3})(?:[ ]?[0-9]{1,2})?\\b')) {
                        c.iban.isValid = false;
                        c.iban.message = 'Invalid IBAN format.';
                        validationFlag = false;
                    } else {
                        c.iban.isValid = true;
                        c.iban.message = '';
                    }
                });
            return;
            }

            if (state[key].value === '') {
                state[key].isValid = false;
                state[key].message = 'This field is required.';
                validationFlag = false;
            } else if (state[key].value.length > 128) {
                state[key].isValid = false;
                state[key].message = 'Input too long.';
                state[key].value = '';
                validationFlag = false;
            } else if (!state[key].isValid) {
                validationFlag = false;
            }
        });

        this.setState(state);
        return validationFlag;
    };

    calculateYearDifference(){
        let firstDate = moment(this.state.dateOfBirth.value, 'YYYY-MM-DD');
        let secondDate = moment(moment(), 'YYYY-MM-DD');
        let duration = moment.duration(secondDate.diff(firstDate));
        let years = duration.asYears();
        return years;
    };

    handleOnChange = event => {
        let state = cloneDeep(this.state);
        state[event.target.name].value = event.target.value;
        this.setState(state);
    };

    handleOnChangePhone = phone => {
        this.setState({
            phone: {
                value: phone,
                isValid: true,
                message: ''
            }
        })
    };

    handleCancel = () => this.props.history.push(VEHICLE_LOGIN_ROUTE);

    togglePopoverBirthDate = () => {
        this.setState({
            dateOfBirth : {
                ...this.state.dateOfBirth,
                message: ''
            }
        });
    };

    render() {
        const {name, surname, phone, email, password, repeatedPassword, dateOfBirth, gender} = this.state;

        return (
            <div>
                <NavbarComponent mode={"vehicle_registration"}/>
                <Container fluid>
                    <div id="user" className="form-container">
                        <div className="form-container-tab">
                            <Col xs="auto" md="auto">
                                <Row>
                                    Personal info:
                                </Row>
                            </Col>
                            <Col md={{offset: 2, size: 8}} xs={{offset: 0, size: 12}}>

                                <Row>
                                    <Col md={3}>
                                        <Label for="name">First name:</Label>
                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup>
                                            <Input
                                                placeholder={name.message}
                                                name="name"
                                                invalid={!name.isValid}
                                                onChange={this.handleOnChange}
                                                value={name.value}
                                            />
                                        </InputGroup>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label for="surname">Last name:</Label>
                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup>
                                            <Input
                                                placeholder={surname.message}
                                                name="surname"
                                                invalid={!surname.isValid}
                                                onChange={this.handleOnChange}
                                                value={surname.value}
                                            />
                                        </InputGroup>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label for="dateOfBirth">Date of birth:</Label>
                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup id="dateOfBirth">
                                            <Input
                                                   placeholder={dateOfBirth.message}
                                                   name="dateOfBirth"
                                                   invalid={!dateOfBirth.isValid}
                                                   onChange={this.handleOnChange}
                                                   type="date"
                                                   value={dateOfBirth.value}
                                            />
                                        </InputGroup>
                                        <Popover style={{background: "tomato", borderRadius: "0.5vh"}}
                                                 placement="right"
                                                 isOpen={dateOfBirth.message !== ''}
                                                 target="dateOfBirth"
                                                 toggle={this.togglePopoverBirthDate}>
                                            <PopoverBody>{dateOfBirth.message}</PopoverBody>
                                        </Popover>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label for="gender">Gender:</Label>
                                    </Col>
                                    <Col xs="auto" md="auto">
                                        <Form inline>
                                            <InputGroup>
                                                <Input
                                                    checked={gender.value.toLowerCase() === 'male'}
                                                    type="radio"
                                                    name="gender"
                                                    value="male"
                                                    onChange={this.handleOnChange}/>
                                                <InputGroupAddon addonType="append">
                                                    {' '}male{' '}
                                                </InputGroupAddon>
                                            </InputGroup>
                                            <InputGroup>
                                                <Input
                                                    checked={gender.value.toLowerCase() === 'female'}
                                                    type="radio"
                                                    name="gender"
                                                    value="female"
                                                    onChange={this.handleOnChange}/>
                                                <InputGroupAddon addonType="append">
                                                    {' '}female{' '}
                                                </InputGroupAddon>
                                            </InputGroup>
                                            <InputGroup>
                                                <Input
                                                    checked={gender.value.toLowerCase() === 'other'}
                                                    type="radio"
                                                    name="gender"
                                                    value="other"
                                                    onChange={this.handleOnChange}/>
                                                <InputGroupAddon addonType="append">
                                                    {' '}other{' '}
                                                </InputGroupAddon>
                                            </InputGroup>
                                        </Form>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label for="phone">Phone number:</Label>
                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup>
                                            <InputGroupAddon addonType="append">
                                                <ReactPhoneInput
                                                    inputStyle={{
                                                        borderRadius: "0",
                                                        height: "100%",
                                                        width: "100%",
                                                        display: "inline-block",
                                                        position: "relative",
                                                        boxSizing: "border-box"
                                                    }}
                                                    defaultCountry={'hr'}
                                                    name="phone"
                                                    placeholder={phone.message}
                                                    value={phone.value}
                                                    invalid={!phone.isValid}
                                                    onChange={this.handleOnChangePhone}
                                                />
                                            </InputGroupAddon>
                                        </InputGroup>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label>Email address:</Label>
                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup>
                                            <Input
                                                placeholder={email.message}
                                                name="email"
                                                invalid={!email.isValid}
                                                onChange={this.handleOnChange}
                                                type="email"
                                                value={email.value}
                                            />
                                        </InputGroup>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label for="password">Password:</Label>

                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup>
                                            <Input
                                                placeholder={password.message}
                                                name="password"
                                                invalid={!password.isValid}
                                                onChange={this.handleOnChange}
                                                type="password"
                                                value={password.value}
                                            />
                                        </InputGroup>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col md={3}>
                                        <Label for="repeatedPassword">Repeated password:</Label>

                                    </Col>
                                    <Col xs={12} md={9}>
                                        <InputGroup>
                                            <Input
                                                placeholder={repeatedPassword.message}
                                                name="repeatedPassword"
                                                invalid={!repeatedPassword.isValid}
                                                onChange={this.handleOnChange}
                                                type="password"
                                                value={repeatedPassword.value}
                                            />
                                        </InputGroup>
                                    </Col>
                                </Row>
                            </Col>
                        </div>
                    </div>
                    <div id="vehicles" className="form-container">
                        <div className="form-container-tab">
                            <Col xs="auto" md="auto">
                                <Row>
                                    Vehicles:
                                </Row>
                            </Col>
                            <Col md={{offset: 2, size: 8}} xs={{offset: 0, size: 12}}>
                                <VehicleFormList
                                    vehicles={this.state.vehicles}
                                    vehicleTypes={this.state.vehicleTypes}
                                    addVehicle={this.addVehicle}
                                    removeVehicle={this.removeVehicle}
                                    handleOnChangeVehicle={this.handleOnChangeVehicle}
                                />
                            </Col>
                        </div>
                    </div>
                    <div id="user" className="form-container">
                        <div className="form-container-tab">
                            <Col xs="auto" md="auto">
                                <Row>
                                    Accounts:
                                </Row>
                            </Col>
                            <Col md={{offset: 2, size: 8}} xs={{offset: 0, size: 12}}>
                                <CardFormList
                                    register={true}
                                    cards={this.state.cards}
                                    addCard={this.addCard}
                                    removeCard={this.removeCard}
                                    handleOnChangeCard={this.handleOnChangeCard}
                                />
                            </Col>
                        </div>
                    </div>
                </Container>
                <div className="button-group">
                    <Button size="lg" onClick={this.handleCancel}>Cancel</Button>
                    <Button size="lg" onClick={this.handleSubmit}>Submit</Button>
                </div>
            </div>
        );
    }
    ;

}

export default VehicleOwnerForm;