'use client';

import React from 'react';

import { CaretDownIcon, QuestionMarkCircledIcon } from '@radix-ui/react-icons';
import { useTranslation } from 'react-i18next';

import { AnalysisResponse } from '@kit/doctor/schema/doctor-analysis-detail-view.schema';
import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
import { formatDate } from '@kit/shared/utils';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@kit/ui/collapsible';
import { Trans } from '@kit/ui/trans';

import AnalysisDoctor from './analysis-doctor';

export default function DoctorAnalysisWrapper({
  analysisData,
}: {
  analysisData: AnalysisResponse;
}) {
  const { t } = useTranslation();

  return (
    <>
      <Collapsible className="w-full" key={analysisData.id}>
        <CollapsibleTrigger
          disabled={!analysisData.latestPreviousAnalysis}
          asChild
        >
          <div className="[&[data-state=open]_.caret-icon]:rotate-180">
            <AnalysisDoctor
              startIcon={
                analysisData.latestPreviousAnalysis && (
                  <CaretDownIcon className="caret-icon transition-transform duration-200" />
                )
              }
              endIcon={
                analysisData.comment && (
                  <>
                    <div className="xs:flex hidden">
                      <InfoTooltip
                        content={analysisData.comment}
                        icon={
                          <QuestionMarkCircledIcon className="mx-2 text-blue-800" />
                        }
                      />
                    </div>
                    <p className="xs:hidden">
                      <strong>
                        <Trans i18nKey="doctor:labComment" />:
                      </strong>{' '}
                      {analysisData.comment}
                    </p>
                  </>
                )
              }
              analysisElement={{
                analysis_name_lab: analysisData.analysis_name,
              }}
              results={analysisData}
            />
          </div>
        </CollapsibleTrigger>
        {analysisData.latestPreviousAnalysis && (
          <CollapsibleContent>
            <div className="my-1 flex flex-col gap-2">
              <AnalysisDoctor
                endIcon={
                  analysisData.latestPreviousAnalysis.comment && (
                    <>
                      <div className="xs:flex hidden">
                        <InfoTooltip
                          content={analysisData.latestPreviousAnalysis.comment}
                          icon={
                            <QuestionMarkCircledIcon className="mx-2 text-blue-800" />
                          }
                        />
                      </div>
                      <p className="xs:hidden">
                        <strong>
                          <Trans i18nKey="doctor:labComment" />:{' '}
                        </strong>
                        {analysisData.latestPreviousAnalysis.comment}
                      </p>
                    </>
                  )
                }
                analysisElement={{
                  analysis_name_lab: t('doctor:previousResults', {
                    date: formatDate(
                      analysisData.latestPreviousAnalysis.response_time!,
                    ),
                  }),
                }}
                results={analysisData.latestPreviousAnalysis}
              />
              {analysisData.latestPreviousAnalysis.nestedElements?.map(
                (nestedElement, nestedIndex) => (
                  <div
                    key={`prev-nested-${nestedElement.analysisElementOriginalId}-${nestedIndex}`}
                    className="ml-8"
                  >
                    <AnalysisDoctor
                      analysisElement={{
                        analysis_name_lab: nestedElement.analysisNameLab ?? '',
                      }}
                      results={{
                        norm_status: nestedElement.normStatus,
                        response_value: nestedElement.responseValue,
                        unit: nestedElement.unit,
                        norm_lower: nestedElement.normLower,
                        norm_upper: nestedElement.normUpper,
                        norm_lower_included: nestedElement.normLowerIncluded,
                        norm_upper_included: nestedElement.normUpperIncluded,
                        response_time: nestedElement.responseTime,
                      }}
                    />
                  </div>
                ),
              )}
            </div>
          </CollapsibleContent>
        )}
      </Collapsible>
      {analysisData.nestedElements?.map((nestedElement, nestedIndex) => (
        <div
          key={`nested-${nestedElement.analysisElementOriginalId}-${nestedIndex}`}
          className="ml-8"
        >
          <AnalysisDoctor
            analysisElement={{
              analysis_name_lab: nestedElement.analysisNameLab ?? '',
            }}
            results={{
              norm_status: nestedElement.normStatus,
              response_value: nestedElement.responseValue,
              unit: nestedElement.unit,
              norm_lower: nestedElement.normLower,
              norm_upper: nestedElement.normUpper,
              norm_lower_included: nestedElement.normLowerIncluded,
              norm_upper_included: nestedElement.normUpperIncluded,
              response_time: nestedElement.responseTime,
            }}
          />
        </div>
      ))}
    </>
  );
}