import React from 'react';
import PropTypes from 'prop-types';
import {find, join, map} from 'lodash';
import {MAP_URL, TWITTER_URL, MAILTO_URL} from '../../contacts/constants';
import {gettext} from 'core/utils';

export class ItemContainer extends React.Component<any, any> {
    static propTypes: any;
    static defaultProps: any;

    elemProps: any;
    elemValue: any;

    constructor(props) {
        super(props);

        this.init(props);
    }

    getContactNumber(item, field) {
        return find(item[field], 'number') ? join(map(item[field], 'number'), ', ') : null;
    }

    getContactNumberTitle(item, field) {
        return find(item[field], 'usage') ? join(map(item[field], 'usage'), ', ') : null;
    }

    getEmailValue(item) {
        const emails = map(item.contact_email, (email) => (
            <a href={`${MAILTO_URL}${email}`} title={`${email}`}>{email}</a>
        ));

        return map(emails, (email, i) => (
            <span key={`emails-${i}`}>
                {i > 0 && ', '}
                {email}
            </span>
        ));
    }

    init(props) {
        let value;
        let title;
        let altTitle;
        let item;
        let key;
        let _class;
        let _link;
        const addressInfo = [];

        item = props.item;
        key = props.field || null;
        _class = 'container';
        _link = _class + ' link';

        if (item.contact_address) {
            addressInfo.push(item.contact_address[0]);
        }

        if (item.locality) {
            addressInfo.push(item.locality);
        }

        if (item.city) {
            addressInfo.push(item.city);
        }

        if (item.contact_state?.name != null) {
            addressInfo.push(item.contact_state.name);
        }

        if (item.postcode) {
            addressInfo.push(item.postcode);
        }

        if (item.country?.name != null) {
            addressInfo.push(item.country.name);
        }

        const contactAddress = addressInfo.join(', ');

        switch (key) {
        case 'contact_phone':
            value = this.getContactNumber(item, key);
            title = value && gettext(this.getContactNumberTitle(item, key));
            break;
        case 'mobile':
            value = this.getContactNumber(item, key);
            title = value && gettext(this.getContactNumberTitle(item, key));
            break;
        case 'contact_email':
            value = item.contact_email ? this.getEmailValue(item) : null;
            _class = _link;
            break;
        case 'website':
            value = (<a href={item.website} target="_blank" rel="noopener noreferrer">{item.website}</a>);
            title = value && item.website;
            _class = _link;
            break;
        case 'twitter':
            value = (
                <a
                    href={`${TWITTER_URL}${item.twitter}`}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    <i className="icon-twitter" />
                </a>
            );
            title = value && `${TWITTER_URL}${item.twitter}`;
            _class = _link;
            break;
        case 'facebook':
        case 'instagram':
            value = (
                <a href={item[key]} target="_blank" rel="noopener noreferrer"><i className={`icon-${key}`} /></a>
            );
            title = value && item[key];
            _class = _link;
            break;
        case 'location':
            value = contactAddress ? (
                <a
                    href={`${MAP_URL}${contactAddress}`}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    {contactAddress}
                </a>
            ) : null;
            title = value && contactAddress;
            _class = _link;
            break;
        }

        altTitle = value ? value : null;

        this.elemProps = {
            key: key,
            className: _class,
            title: title ? title : altTitle,
        };

        this.elemValue = value;
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.item !== this.props.item) {
            this.init(nextProps);
        }
    }

    render() {
        return (
            <span {...this.elemProps}>
                {this.elemValue}
            </span>
        );
    }
}

ItemContainer.propTypes = {
    item: PropTypes.object,
    field: PropTypes.string,
};