import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Icon from "Components/Icon";
import './styles.scss';

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

        this.state = {
            isVisible: false,
        };

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

    componentWillMount() {
        document.addEventListener('mousedown', this.handleClick, false);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClick, false);
    }

    handleClick(e) {
        if (this.nodeManagerInfo && this.nodeManagerInfo.contains(e.target)) {
            return;
        }

        if (this.nodeButton.contains(e.target)) {
            this.toggleManagerInfoVisibility();
            return;
        }

        this.hideManagerInfoVisibility();
    }

    hideManagerInfoVisibility() {
        this.setState({
            isVisible: false,
        });
    }

    toggleManagerInfoVisibility() {
        this.setState({
            isVisible: !this.state.isVisible,
        });
    }

    render() {
        const skypeLink = `skype: ${this.props.managersData.skype}`;
        const phoneLink = `callto: ${this.props.managersData.phone}`;
        const emailLink = `mailto: ${this.props.managersData.email}`;
        const blockClassName = `ManagersInfo ${this.state.isVisible && 'ManagersInfo_active'}`;

        const phoneBlock = this.props.managersData.phone && (
            <div className="ManagersInfo__item">
                <Icon
                    name="phone"
                    classNames='ManagersInfo__item-icon'
                />
                <a
                    className="ManagersInfo__item-link"
                    href={phoneLink}
                    target="_blank"
                >
                    +{this.props.managersData.phone}
                </a>
            </div>
        );
        const emailBlock = this.props.managersData.email && (
            <div className="ManagersInfo__item">
                <Icon
                    name="mail"
                    classNames='ManagersInfo__item-icon'
                />
                <a
                    className="ManagersInfo__item-link"
                    href={emailLink}
                    target="_blank"
                >
                    {this.props.managersData.email}
                </a>
            </div>
        );
        const skypeBlock = this.props.managersData.skype && (
            <div className="ManagersInfo__item">
                <Icon
                    name="skype"
                    color="blue"
                    classNames='ManagersInfo__item-icon'
                />
                <a
                    className="ManagersInfo__item-link"
                    href={skypeLink}
                    target="_blank"
                >
                    {this.props.managersData.skype}
                </a>
            </div>
        );

        return (
            <div className={blockClassName}>
                <button
                    className="ManagersInfo__button"
                    ref={(node) => { this.nodeButton = node; }}
                >
                    <img
                        className="ManagersInfo__button-icon"
                        src={this.props.managersData.avatar}
                        height="24"
                        width="24"
                        alt="Manager's icon avatar"
                    />
                    <div className="ManagersInfo__button-person">
                        <div className="ManagersInfo__button-person-post">
                            Manager
                        </div>
                        <div className="ManagersInfo__button-person-data">
                            <span className="ManagersInfo__button-person-name">
                                {this.props.managersData.name}
                            </span>
                        </div>
                    </div>
                </button>
                {this.state.isVisible && (
                    <div
                        className="ManagersInfo__wrapper"
                        ref={(node) => { this.nodeManagerInfo = node; }}
                    >
                        <div className="ManagersInfo__person">
                            <div className="ManagersInfo__person-post">
                                Your manager
                            </div>
                            <div className="ManagersInfo__person-name">
                                {this.props.managersData.name}
                            </div>
                            <img
                                className="ManagersInfo__person-avatar"
                                src={this.props.managersData.avatar}
                                alt="Manager's avatar"
                            />
                        </div>
                        <div className="ManagersInfo__info">
                            {skypeBlock}
                            {emailBlock}
                            {phoneBlock}
                        </div>
                    </div>
                )}
            </div>
        );
    }
}

ManagersInfo.propTypes = {
    managersData: PropTypes.object.isRequired,
};

export default ManagersInfo;