import React from "react";
import { SettingsContext } from "../../shared/providers/SettingsProvider";
import Configuration from "../../shared/configuration/Configuration";
import { IUserSummary } from "../../shared/models/Settings";
import "./UserDisplay.css";
import moment from "moment";

export enum UserDisplayTargets {
    Profile = "profile",
    Dashboard = "dashboard"
}

interface IUserDisplayProps {
    employeeId: string;
    target?: UserDisplayTargets;
}

const UserDisplay: React.FC<IUserDisplayProps> = (props) => {
    const settings = React.useContext(SettingsContext);
    const user = settings?.employees.find(
        (x) => x.employeeId === props.employeeId
    );

    function determineDecoration(user: IUserSummary) {
        return user.terminated ? "term-appUser" : "active-appUser";
    }

    let terminated = "";
    if (user && user.terminated) {
        terminated = moment(user.terminated).format(" (MM/DD/YYYY)");
    }

    const toTitleCase = (str: string) => {
        return str.replace(/\w\S*/g, function (txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
    };

    let href = Configuration.PrefixAppUrlWithBasename(
        Configuration.Get.appUrls.profile
    ).replace(":employeeId?", props.employeeId);

    if (props.target && props.target === UserDisplayTargets.Dashboard) {
        href =
            Configuration.PrefixAppUrlWithBasename(
                Configuration.Get.appUrls.dashboard
            ) +
            "?dashboard=employee&employeeId=" +
            props.employeeId;
    }

    return (
        <span data-test="department-display-wrapper">
            {props.employeeId && user ? (
                <a
                    href={href}
                    title={user.employeeId + ", manager is " + user.managerKey}
                    className={determineDecoration(user)}
                >
                    {toTitleCase(user.fullName)}
                    {terminated}
                </a>
            ) : (
                <>Missing</>
            )}
        </span>
    );
};

export default UserDisplay;