import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import type { ElectricalItem } from '@house-plan-maker/shared';
import { computeCableRouteLength } from '../tools/ElectricalTool';
import styles from './cable-length-status.module.css';

interface CableLengthStatusProps {
  readonly electricalItems: readonly ElectricalItem[];
}

/** Status bar component showing total cable route length. */
export function CableLengthStatus({ electricalItems }: CableLengthStatusProps) {
  const { t } = useTranslation();

  const totalLength = useMemo(
    () => computeCableRouteLength(electricalItems),
    [electricalItems],
  );

  const hasCables = electricalItems.some((i) => i.type === 'CABLE_ROUTE');

  if (!hasCables) return null;

  return (
    <div className={styles.status}>
      <span className={styles.label}>{t('cableLength.label')}</span>
      <span className={styles.value}>
        {totalLength.toFixed(2)}m
      </span>
    </div>
  );
}
