'use client';

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">
            <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}
            />
          </div>
        </CollapsibleContent>
      )}
    </Collapsible>
  );
}