"use client";

import { CheckCircle2Icon, ChevronsDownIcon, XCircleIcon } from "lucide-react";
import { useTranslation } from "react-i18next";
import { TResponseData } from "@formbricks/types/responses";
import { TSurveyElement } from "@formbricks/types/surveys/elements";
import { getTextContent } from "@formbricks/types/surveys/validation";
import { TUserLocale } from "@formbricks/types/user";
import { getLocalizedValue } from "@/lib/i18n/utils";
import { getSurveyDateFormatMap } from "@/lib/utils/date-display";
import { parseRecallInfo } from "@/lib/utils/recall";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";

interface ElementSkipProps {
  skippedElements: string[] | undefined;
  status: string;
  elements: TSurveyElement[];
  isFirstElementAnswered?: boolean;
  responseData: TResponseData;
  locale: TUserLocale;
}

export const ElementSkip = ({
  skippedElements,
  status,
  elements,
  isFirstElementAnswered,
  responseData,
  locale,
}: ElementSkipProps) => {
  const { t } = useTranslation();
  const dateFormats = getSurveyDateFormatMap(elements);
  return (
    <div>
      {skippedElements && (
        <div className="my-2 flex w-full px-2 text-sm text-slate-400">
          {status === "welcomeCard" && (
            <div className="mb-2 flex">
              {
                <div
                  className={`relative flex ${
                    isFirstElementAnswered ? "h-[100%]" : "h-[200%]"
                  } w-0.5 items-center justify-center`}
                  style={{
                    background:
                      "repeating-linear-gradient(rgb(148, 163, 184), rgb(148, 163, 184) 5px, transparent 5px, transparent 8px)",
                  }}>
                  <CheckCircle2Icon className="p-0.25 absolute top-0 w-[1.5rem] min-w-[1.5rem] rounded-full bg-white text-slate-400" />
                </div>
              }
              <div className="ml-6 flex flex-col text-slate-700">{t("common.welcome_card")}</div>
            </div>
          )}
          {status === "skipped" && (
            <div className="flex">
              <div
                className="flex w-0.5 items-center justify-center"
                style={{
                  background:
                    "repeating-linear-gradient(to bottom,   rgb(148 163 184),  rgb(148 163 184) 8px, transparent 5px, transparent 15px)",
                }}>
                {skippedElements.length > 1 && (
                  <TooltipProvider delayDuration={50}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <ChevronsDownIcon className="w-[1.25rem] min-w-[1.25rem] rounded-full bg-slate-400 p-0.5 text-white" />
                      </TooltipTrigger>
                      <TooltipContent>
                        <p data-testid="tooltip-respondent_skipped_questions">
                          {t("environments.surveys.responses.respondent_skipped_questions")}
                        </p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                )}
              </div>
              <div className="ml-6 flex flex-col">
                {skippedElements?.map((questionId) => {
                  return (
                    <p className="my-2" key={questionId}>
                      {getTextContent(
                        parseRecallInfo(
                          getLocalizedValue(
                            elements.find((question) => question.id === questionId)?.headline ?? {
                              default: "",
                            },
                            "default"
                          ),
                          responseData,
                          undefined,
                          false,
                          locale,
                          dateFormats
                        )
                      )}
                    </p>
                  );
                })}
              </div>
            </div>
          )}
          {status === "aborted" && (
            <div className="flex">
              <div
                className="flex w-0.5 flex-grow items-start justify-center"
                style={{
                  background:
                    "repeating-linear-gradient(to bottom,  rgb(148 163 184),  rgb(148 163 184) 2px, transparent 2px, transparent 10px)",
                }}>
                <div className="flex">
                  <XCircleIcon className="min-h-[1.5rem] min-w-[1.5rem] rounded-full bg-white text-slate-400" />
                </div>
              </div>
              <div className="mb-2 ml-4 flex flex-col">
                <p
                  data-testid="tooltip-survey_closed"
                  className="mb-2 w-fit rounded-lg bg-slate-100 px-2 font-medium text-slate-700">
                  {t("environments.surveys.responses.survey_closed")}
                </p>
                {skippedElements &&
                  skippedElements.map((questionId) => {
                    return (
                      <p className="my-2" key={questionId}>
                        {getTextContent(
                          parseRecallInfo(
                            getLocalizedValue(
                              elements.find((question) => question.id === questionId)?.headline ?? {
                                default: "",
                              },
                              "default"
                            ),
                            responseData,
                            undefined,
                            false,
                            locale,
                            dateFormats
                          )
                        )}
                      </p>
                    );
                  })}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};
