import Divider from '@material-hu/mui/Divider';

import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { type User } from 'src/types/user';
import { getFullname } from 'src/utils/userUtils';

import type { EmployeeProfileField } from '../../types/retention';
import { computeSeniority } from '../../utils/formatters';
import { parseEmployeeSnapshot } from '../../utils/parsers';
import { SidebarSection, DetailRow } from './SidebarWidgets';

type EmployeeDetailsPanelProps = {
  snapshotJson: string;
  user: User | null;
  employeeProfile: EmployeeProfileField[];
};

function ConfiguredProfileFields({
  fields,
}: {
  fields: EmployeeProfileField[];
}) {
  if (fields.length === 0) return null;

  return (
    <>
      <Divider sx={{ my: 1.5 }} />
      {fields.map(field => (
        <DetailRow
          key={field.label}
          label={field.label}
          value={field.value}
        />
      ))}
    </>
  );
}

function UserBasedDetails({
  user,
  employeeProfile,
  t,
}: {
  user: User;
  employeeProfile: EmployeeProfileField[];
  t: (key: string) => string;
}) {
  const { formatDate } = useFormatDate();

  const bossName = user.reviewer ? getFullname(user.reviewer) : null;

  return (
    <>
      <DetailRow
        label={t('users:user_fields.employee_internal_id')}
        value={user.employeeInternalId || null}
      />
      {user.jobPosition?.name && (
        <DetailRow
          label={t('tali.employee_details.position')}
          value={user.jobPosition.name}
        />
      )}
      <DetailRow
        label={t('users:user_fields.direct_boss')}
        value={bossName || null}
      />
      <DetailRow
        label={t('tali.employee_details.hire_date')}
        value={
          user.hiringDate ? formatDate(user.hiringDate, 'dd MMM yyyy') : null
        }
      />
      <DetailRow
        label={t('tali.employee_details.seniority')}
        value={computeSeniority(user.hiringDate, t)}
      />
      <ConfiguredProfileFields fields={employeeProfile} />
    </>
  );
}

function SnapshotBasedDetails({
  snapshotJson,
  employeeProfile,
  t,
}: {
  snapshotJson: string;
  employeeProfile: EmployeeProfileField[];
  t: (key: string) => string;
}) {
  const details = parseEmployeeSnapshot(snapshotJson);

  return (
    <>
      <DetailRow
        label={t('tali.employee_details.store')}
        value={details.storeName}
      />
      <DetailRow
        label={t('tali.employee_details.position')}
        value={details.position}
      />
      <DetailRow
        label={t('tali.employee_details.seniority')}
        value={computeSeniority(details.hireDate, t)}
      />
      <DetailRow
        label={t('tali.employee_details.hire_date')}
        value={details.hireDate}
      />
      <ConfiguredProfileFields fields={employeeProfile} />
    </>
  );
}

export function EmployeeDetailsPanel({
  snapshotJson,
  user,
  employeeProfile,
}: EmployeeDetailsPanelProps) {
  const { t } = useLokaliseTranslation('backoffice_only');

  return (
    <SidebarSection title={t('tali.employee_details.title')}>
      {user ? (
        <UserBasedDetails
          user={user}
          employeeProfile={employeeProfile}
          t={t}
        />
      ) : (
        <SnapshotBasedDetails
          snapshotJson={snapshotJson}
          employeeProfile={employeeProfile}
          t={t}
        />
      )}
    </SidebarSection>
  );
}