import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { useState } from "react";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible/collapsible";
import { useLocale } from "@/hooks/useLocale";
import { cn } from "@/libs/utils";

import { Button } from "../button/button";

const seeAllTextVariants = cva("data-[state=true]:hidden", {
  variants: {
    lineClampSize: {
      "1": "line-clamp-1",
      "2": "line-clamp-2",
      "3": "line-clamp-3",
      "4": "line-clamp-4",
    },
  },
  defaultVariants: {
    lineClampSize: "2",
  },
});

export interface SeeAllTextProps
  extends VariantProps<typeof seeAllTextVariants> {
  text: string;
  classname?: React.ComponentProps<"div">["className"];
  innerHtml?: boolean;
}

const SeeAllText = ({
  lineClampSize,
  classname,
  text,
  innerHtml = false,
}: SeeAllTextProps) => {
  const [isOpen, setIsOpen] = useState(false);
  function getContent() {
    if (!innerHtml) {
      return <p>{text}</p>;
    }
    // eslint-disable-next-line react/no-danger
    return <div dangerouslySetInnerHTML={{ __html: text }} />;
  }
  const content = getContent();
  const { t } = useLocale();
  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="">
      <div
        data-state={isOpen}
        className={cn(
          seeAllTextVariants({
            lineClampSize,
          }),
          classname,
        )}
      >
        {content}
      </div>
      <CollapsibleContent className={classname}>{content}</CollapsibleContent>
      <CollapsibleTrigger asChild>
        <Button
          variant="primary-text"
          className="!h-auto !p-0 text-primary-500"
          rightIcon={{ name: isOpen ? "ChevronUp" : "ChevronDown", size: 20 }}
        >
          {isOpen ? t("Close") : t("Read more")}
        </Button>
      </CollapsibleTrigger>
    </Collapsible>
  );
};

export { SeeAllText };