import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "~/components/ui/accordion";
import { Circle, CircleCheck } from "lucide-react";
import { cn } from "~/lib/utils";
import { Separator } from "~/components/ui/separator";
import { UploadModal } from "~/components/upload_modal";
import type { UsersId } from "~/schemas/public/Users";
import { useTranslation } from "~/providers/I18nProvider";

export const MotivazioneTransitorio = ({
  value,
  onValueChange,
  userId,
}: {
  value: string | undefined;
  onValueChange: (v: string) => void;
  userId: UsersId;
}) => {
  const { t } = useTranslation();
  return (
    <Accordion
      type="single"
      collapsible
      value={value}
      onValueChange={(v) => {
        onValueChange(v);
      }}
    >
      {t.preferenze.motivazioni_mappings.map((option) => (
        <AccordionItem value={option.id} key={option.id}>
          <AccordionTrigger
            className={cn(
              value === option.id &&
                "text-primary underline underline-offset-2",
            )}
          >
            <div className={cn("flex items-center justify-start gap-2")}>
              {value === option.id ? (
                <CircleCheck className="stroke-primary size-5" />
              ) : (
                <Circle className="stroke-muted-foreground size-5" />
              )}
              {option.title}
            </div>
          </AccordionTrigger>
          <AccordionContent>
            <div className="border-border rounded-lg border p-4">
              <p>{option.text}</p>
              {option.cta && (
                <>
                  <Separator className="my-4" />
                  <UploadModal isAdmin={false} userId={userId} />
                  <p>{option.cta_label}</p>
                </>
              )}
            </div>
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
};
