import { useLokaliseTranslation } from 'src/utils/i18n';

import PerformanceLoading from '../../components/PerformanceLoading';
import CalibrationForm from '../CalibrationForm';
import useCalibrationDetail from '../hooks/useCalibrationDetail';
import useCalibrationsSidebar from '../hooks/useCalibrationsSidebar';

import CalibrationErrorState from './CalibrationErrorState';

type CalibrationDetailContentProps = {
  cycleId: string | number;
  formReviewId: number;
};

const CalibrationDetailContent = ({
  cycleId,
  formReviewId,
}: CalibrationDetailContentProps) => {
  const { t } = useLokaliseTranslation(['performance']);

  const { data, isLoading, error } = useCalibrationDetail({
    cycleId,
    formReviewId,
  });

  const { items } = useCalibrationsSidebar({ cycleId });
  const currentItem = items.find(item => item.formReviewId === formReviewId);
  const user = currentItem?.user;

  if (isLoading) return <PerformanceLoading />;

  if (error || !data) {
    return (
      <CalibrationErrorState
        cycleId={cycleId}
        title={t('performance:calibration.detail.error.generic')}
      />
    );
  }

  return (
    <CalibrationForm
      cycleId={cycleId}
      detail={data.data}
      user={user}
    />
  );
};

export default CalibrationDetailContent;