import React from "react";
import { connect } from "react-redux";
import { SpinnerCircular } from 'spinners-react';

import { getImage } from '../../../actions';

class Manager extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			company: {}, 
			photo: undefined, 
			loading: true, 
			full: false, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			company: nextProps.company, 
		};
	}

	componentDidMount()
	{
		const { company } = this.state;

		if(company.manager_photo !== undefined && company.manager_photo !== null && company.manager_photo !== "")
		{
			getImage({ id: company.manager_photo })
			.then((result) => 
			{
				this.setState({ photo: result, loading: false });
			})
		}
		else
		{
			this.setState({ photo: null, loading: false });
		}
	}

	_handle_onFull = () => 
	{
		this.setState({ full: this.state.full ? false : true });
	}

	render()
	{
		const { company, loading, photo, full, } = this.state;

		return (
			<div className="helpBox_wrapper">
				<div className={ `helpBox ${ !full ? "hidden" : "" }` }>
					<div className="avatar">
						{ loading ? (
							<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
						) : (
							<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
						) }
					</div>
					<div className="content">
						<p className="message">Помогу выбрать новый автомобиль</p>
						<p className="name">{ company.manager_fio }</p>
						<p className="position">{ company.manager_jobtitle }</p>
						<div className="info">
							<a href={ `mailto:${ company.manager_email }` }>{ company.manager_email }</a>
							{ company.manager_mobilephone !== undefined && company.manager_mobilephone !== null && company.manager_mobilephone !== "" && (
								<a href={ `tel:+${ company.manager_mobilephone.replace(/[^\d]/mg, '') }` }>{ company.manager_mobilephone }</a>
								) }
							{ company.manager_telegram !== undefined && company.manager_telegram !== null && company.manager_telegram !== "" && (
								<a href={ `https://telegram.me/${ company.manager_telegram.replace("@", "") }` } target="_blank">{ `@${ company.manager_telegram.replace("@", "")}` }</a>
								) }
						</div>
					</div>
					<div className="button" onClick={ this._handle_onFull }></div>
				</div>
				<div className={ `helpBox_small interactive ${ full ? "hidden" : "" }` } onClick={ this._handle_onFull }>
					<div className="avatar">
						{ loading ? (
							<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
						) : (
							<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
						) }
					</div>
				</div>
			</div>
		)
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		company: state.company, 
	}
}

export default connect(mapStateToProps)(Manager);