import { memo } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import Drawer from '@material-hu/components/design-system/Drawer';

import { type PerformanceReviewCoreFormQuestion } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import SingleQuestionReadOnly from './SingleQuestionReadOnly';

type CalibrationComparisonDrawerProps = {
  open: boolean;
  onClose: () => void;
  subordinateQuestion: PerformanceReviewCoreFormQuestion | null;
  calibratedQuestion: PerformanceReviewCoreFormQuestion | null;
};

const CalibrationComparisonDrawer = ({
  open,
  onClose,
  subordinateQuestion,
  calibratedQuestion,
}: CalibrationComparisonDrawerProps) => {
  const { t } = useLokaliseTranslation('performance');

  // Separate form instances per column so the controllers in each
  // SingleQuestionReadOnly don't share state by `question.id` — otherwise
  // the calibrated column inherits the subordinate's answers.
  const subordinateForm = useForm();
  const calibratedForm = useForm();

  return (
    <Drawer
      open={open}
      onClose={onClose}
      size="large"
      title={t('calibration.detail.comparison.title')}
      primaryContent={
        <FormProvider {...subordinateForm}>
          {subordinateQuestion && (
            <SingleQuestionReadOnly
              question={subordinateQuestion}
              label={t('calibration.detail.comparison.original_label')}
              pillType="neutral"
            />
          )}
        </FormProvider>
      }
      secondaryContent={
        <FormProvider {...calibratedForm}>
          {calibratedQuestion && (
            <SingleQuestionReadOnly
              question={calibratedQuestion}
              label={t('calibration.detail.comparison.calibrated_label')}
              pillType="info"
            />
          )}
        </FormProvider>
      }
    />
  );
};

export default memo(CalibrationComparisonDrawer);