import React, { useState } from "react";
import { useField } from "formik";
import { t } from "../../../auto/js/services";
import { ImageViewer } from "../../../auto/js/widgets";
import { formatDate, useConstructor } from "../../../auto/js/utils";
import { geoMetadataLoader } from "../../../auto/js/metadata/GeoMetadataLoader";

export const PersonViewer = ({...props}) => {
    const [field, meta, helpers] = useField(props.name);
    const { value } = meta;
    const { setValue } = helpers;

    const onChange = (newData) => {
		if (newData != null) {
            setValue(newData);
        }
	}

    useConstructor(() => {
		if (props.observable)
			props.observable.subscribe(onChange);
	});

    return(
        <>
        {(value)?
		<Person data={value} />
		:null}
        </>
    )
}

class Person extends React.Component {
    constructor(props) {
		super(props);
		this.formRef = React.createRef()
		this.state = {
			data: props.data,
			loadingMessage: ''
		}
	}

    componentDidUpdate() {
        if (this.state.data !== this.props.data)
            this.setState({data: this.props.data})
    }
    
    render() {
        let fullname = '';
        let birthdate;
        let birthPlace = [];
        if (this.state.data) {
            birthdate = this.state.data.birthdate? formatDate(this.state.data.birthdate):'Unknown';
            fullname += this.state.data.firstname ? this.state.data.firstname + ' ' : '';
            fullname += this.state.data.secondname ? this.state.data.secondname + ' ' : '';
            fullname += this.state.data.thirdname ? this.state.data.thirdname + ' ' : '';
            fullname += this.state.data.fourthname ? this.state.data.fourthname + ' ' : '';
            fullname += this.state.data.fifthname ? this.state.data.fifthname + ' ' : '';
            if (this.state.data.birthPlace != null) {
                let birthPlaceComponents = this.state.data.birthPlace.split(".");
                let place = this.state.data.birthPlace;
                birthPlace.push(
                    <p>{geoMetadataLoader.getArea(place).name} <br /></p>
                )
                for (let i = 0; i < birthPlaceComponents.length - 1 ; i ++) {
                    let parentAreaId = place.substring(0, place.lastIndexOf("."));
                    place = parentAreaId;
                    birthPlace.push(
                        <p>{geoMetadataLoader.getArea(parentAreaId).name} <br /></p>
                    )                
                }
            }
        }
        
        return (
            <>
            {(this.state.data)?
            <div class="row rv5info">
            <div class="col-md-2">
                <ImageViewer image={this.state.data.image} width={125} height={125}/>  
            </div>
             <div class="col-md-4"><div class="results" style={{paddingLeft:"0px"}}><h4>Personal Details</h4>
                 <p>{fullname}</p>
                 <p>{t`ID`} #: {this.state.data.id}</p>
                 <p>{this.state.data.gender}</p>
             </div>
             </div>
    
             <div class="col-md-3">
                <div class="results">
                  <h4>{t`Birth Details`}</h4>
                 <p>{birthdate}<br />
                {birthPlace}</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="results">
                  <h4>{t`Other Details`}</h4>
                 <p>{this.state.data.maritalStatus}</p>
                </div>
            </div>
            </div>:
            <div className="ValidationError">{t`Person not found`}</div>
            }
            
            </>
        )    
    }
}

