import HighlightIcon from '@material-hu/icons/material/Highlight';
import { IconExternalLink } from '@material-hu/icons/tabler';

import { NODE_DIMENSIONS } from 'src/constants/orgChart';
import OrgChartIcon from 'src/pages/dashboard/orgChart/components/icons/OrgChartIcon';
import { nodeStyles } from 'src/pages/dashboard/orgChart/components/style';
import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import {
  getHireDateColor,
  getHireDateString,
  getYearsInCompany,
} from 'src/utils/orgChart';
import { getInitials } from 'src/utils/userUtils';

import { useTranslation } from '../i18n';
import './styles.css';

const CustomNodeContent = ({
  node,
  chartColor = false,
  isDarkMode = false,
  showEmail: showEmailProp = true,
  showDepartment: showDepartmentProp = true,
  showPosition: showPositionProp = true,
  showHireDate: showHireDateProp = true,
  instanceColor = 'red',
  dimensions = NODE_DIMENSIONS.large,
}) => {
  const { t } = useTranslation();

  const fullName = node.data.firstName + ' ' + node.data.lastName;
  const initials = getInitials(fullName);
  const departmentName = node.data.departmentName;
  const positionName = node.data.positionName;
  const hireDateTime = getYearsInCompany(node.data.hiringDate);
  const duration = hireDateTime?.duration;
  const hasYears = hireDateTime?.hasYears;
  const hireDateColor = isBackground =>
    getHireDateColor(duration, hasYears, isBackground);

  const showDepartment = showDepartmentProp && departmentName;
  const showPosition = showPositionProp && positionName;
  const showEmail = showEmailProp && node.data.email;

  const showHireDate = showHireDateProp && !chartColor && hireDateTime;

  const highlightDark = chartColor && isDarkMode && !!hireDateTime;
  const textColor = highlightDark ? '#FFFFFF' : '#111927';
  const departmentColor = highlightDark ? '#90CAF9' : '#1976D2';
  const iconColor = highlightDark ? '#FFFFFF' : '#2962ff';
  const showSubordinates = node.data.subordinatesCount > 0;

  const showOnlyName = !showDepartment && !showEmail && !showPosition;
  const showProfilePicture = node.data.profilePicture;
  const showHighlight = chartColor && hireDateTime;

  const profileUrl = profileRoutes.profile(node.data.id);
  const tooltipText = t(`GO_TO_USER_PROFILE`);

  // the 3 div wrappers are necessary for a correct display of the org chart
  return (
    <div>
      <div
        id={`node-${node.data.id}`}
        style={{
          ...nodeStyles.nodeContainer,
          width: dimensions.width,
          height: dimensions.height,
          backgroundColor:
            chartColor && hireDateTime ? hireDateColor(true) : '#FFFFFF',
          color: textColor,
        }}
      >
        <div style={nodeStyles.nodeDetails}>
          <div style={nodeStyles.nodeImgContainer}>
            <div
              id={`node-${node.data.id}-profile-picture`}
              style={{
                ...nodeStyles.nodeInitialLetters,
                backgroundColor: instanceColor,
                backgroundImage: showProfilePicture
                  ? `url(${node.data.profilePicture})`
                  : undefined,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }}
            >
              {!showProfilePicture && initials}
            </div>
          </div>
          <div
            style={{
              marginTop: showOnlyName ? 'auto' : '0px',
              marginBottom: showOnlyName ? 'auto' : '0px',
            }}
          >
            {showDepartment && (
              <span
                title={departmentName}
                style={{ ...nodeStyles.nodeDepartment, color: departmentColor }}
              >
                {departmentName}
              </span>
            )}
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: '4px',
              }}
            >
              <span
                title={fullName}
                style={{
                  ...nodeStyles.nodeName,
                  textAlign: showOnlyName ? 'center' : 'left',
                  color: textColor,
                }}
              >
                {fullName}
              </span>
              <a
                className="nodeProfileUrl"
                href={profileUrl}
                target="_blank"
                rel="noopener noreferrer"
                title={tooltipText}
                aria-label={tooltipText}
              >
                <IconExternalLink />
              </a>
            </div>
          </div>
          {showPosition && (
            <span
              title={positionName}
              style={{ ...nodeStyles.nodePosition, color: textColor }}
            >
              {positionName}
            </span>
          )}
          {showEmail && (
            <span
              title={node.data.email}
              style={{ ...nodeStyles.nodeRole, color: textColor }}
            >
              {node.data.email}
            </span>
          )}
          <div
            style={{
              display: 'flex',
              justifyContent:
                !showHireDate && !showHighlight ? 'center' : 'space-between',
              marginTop: 'auto',
              height: '24px',
            }}
          >
            {showHighlight && (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                }}
              >
                <HighlightIcon fillColor={hireDateColor(false)} />
                <div
                  style={{
                    ...nodeStyles.timeHighlighted,
                    borderColor: hireDateColor(false),
                  }}
                >
                  {getHireDateString(duration, hasYears)}
                </div>
              </div>
            )}
            {showHireDate && (
              <div
                style={{
                  ...nodeStyles.hireDate,
                  backgroundColor: hireDateColor(true),
                }}
              >
                {getHireDateString(duration, hasYears)}
              </div>
            )}
            {showSubordinates && (
              <div
                style={{ ...nodeStyles.directSubordinates, color: iconColor }}
              >
                <OrgChartIcon color={iconColor} />
                <span style={{ marginLeft: '6px' }}>
                  {node.data.subordinatesCount}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default CustomNodeContent;
