import { OnboardingStep } from "@toolctrl/db/prisma-browser";
import { OnboardingStepBlockDto } from "../blocks/OnboardingBlockUtils";
import { t as i18nT } from "i18next";

function parseStepToBlock(step: OnboardingStep) {
  try {
    return JSON.parse(step.block) as OnboardingStepBlockDto;
  } catch (e) {
    return {
      id: "",
      title: i18nT("shared.notSet"),
      links: [],
      gallery: [],
      input: [],
    };
  }
}

function getStepDescription(block: OnboardingStepBlockDto) {
  return (
    <div className="flex items-center space-x-2 truncate text-sm">
      <div className="text-foreground shrink-0 font-medium">{block.title}</div>
      {block.description && (
        <>
          <div className="text-muted-foreground">•</div>
          <div className="text-muted-foreground shrink-0">{block.description}</div>
        </>
      )}
      {block.links.length > 0 && (
        <>
          <div className="text-muted-foreground">•</div>
          <div className="text-muted-foreground shrink-0">{i18nT("onboarding.stepSummary.linksCount", { count: block.links.length })}</div>
        </>
      )}
      {block.gallery.length > 0 && (
        <>
          <div className="text-muted-foreground">•</div>
          <div className="text-muted-foreground shrink-0">{i18nT("onboarding.stepSummary.galleryItemsCount", { count: block.gallery.length })}</div>
        </>
      )}
      {block.input.length > 0 && (
        <>
          <div className="text-muted-foreground">•</div>
          <div className="text-muted-foreground shrink-0">{i18nT("onboarding.stepSummary.inputFieldsCount", { count: block.input.length })}</div>
        </>
      )}
    </div>
  );
}

export default {
  parseStepToBlock,
  getStepDescription,
};