import React, { Component } from "react";
import { formatPhoneNumber } from "../modules/strings/phoneNumber";
import "../scss/components/workers/CandidateComponent.scss";
import { Moment } from "moment";
import { phoneNumberWithoutCountryCode } from "../modules/strings/phoneNumberWithoutCountryCode";
interface IPropsCandidateComponent {
    worker: IWorker;
    date?: Moment;
    handleClick: () => void;
    lang?: string;
}
export default class CandidateComponent extends Component {
    props: IPropsCandidateComponent = {
        worker: {},
        handleClick: (): void => {}
    };
    static defaultProps: Partial<IPropsCandidateComponent> = {
        lang: "fr"
    };
    constructor(props: IPropsCandidateComponent) {
        super(props);
    }
    render(): JSX.Element {
        return (
            <div className="candidate-component has-padding-bottom has-padding-top" onClick={this.props.handleClick}>
                <div className="row has-padding-left has-padding-right is-medium">
                    <div className="col-2 has-padding-bottom has-padding-top">
                        <img
                            className="img-fluid rounded-circle"
                            src="https://medgostatic.s3.eu-west-3.amazonaws.com/placeholder_pic.png"
                            alt="profile picture"
                        />
                    </div>
                    <div className="col-10 has-padding-bottom has-padding-top">
                        {this.props.worker.lastName && this.props.worker.firstName ? (
                            <p>
                                <strong>
                                    {this.props.worker.firstName} {this.props.worker.lastName.toUpperCase()}
                                </strong>
                            </p>
                        ) : null}
                        {this.props.date && (
                            <p className="white">
                                {this.props.lang === "fr"
                                    ? "Mission acceptée le"
                                    : this.props.lang === "de"
                                    ? "Mission angenommen am"
                                    : ""}{" "}
                                {this.props.date.format("DD MMMM YYYY [à] HH:mm")}
                            </p>
                        )}
                        <p className="white">
                            {this.props.lang === "fr" ? "Téléphone" : this.props.lang === "de" ? "Telefon" : ""} :{" "}
                            {this.props.worker.phone
                                ? phoneNumberWithoutCountryCode(this.props.worker.phone)
                                : this.props.lang === "fr"
                                ? "Pas de numero"
                                : this.props.lang === "de"
                                ? "Keine Nummer"
                                : ""}
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}