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

import type { IconType } from "@/components/ui/lucid-icon/lucid-icon";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { cn } from "@/libs/utils";

import type { StatusVariants } from "./status-text.variants";
import statusTextVariants from "./status-text.variants";

export type StatusContentType = {
  text: string;
  icon: IconType;
};

export const StatusContent: Record<StatusVariants, StatusContentType> = {
  success: {
    text: "Onaylandı",
    icon: "Check",
  },
  error: {
    text: "İptal Edildi",
    icon: "Ban",
  },
  warning: {
    text: "Onay Bekliyor",
    icon: "Clock",
  },
  denied: {
    text: "Reddedildi",
    icon: "Ban",
  },
};

export interface STextProps
  extends React.HTMLAttributes<HTMLDivElement>,
    Omit<VariantProps<typeof statusTextVariants>, "status"> {
  status: StatusVariants;
  cancelReason?: string;
  text?: string;
  message?: string;
}

function StatusText({
  status,
  className,
  text,
  message,
  cancelReason,
  ...props
}: STextProps) {
  const content = StatusContent[status];

  return (
    <div className="flex flex-col">
      <div className={cn(statusTextVariants({ status }), className)} {...props}>
        <LIcon name={content.icon} className="w-[16px]" />
        {cancelReason ? (
          <p className="ml-1.5">{cancelReason}</p>
        ) : (
          <p className="ml-1.5">{content?.text}</p>
        )}
      </div>
      {text && content?.text !== StatusContent.warning.text && (
        <p className={cn(statusTextVariants({ status }), "text-sm mt-2")}>
          {text}
        </p>
      )}
      {message && content?.text === StatusContent.error.text && (
        <div className="mt-4 flex flex-col gap-2">
          <p className="font-medium text-gray-500">Reddedilme Nedeni</p>
          <div className="rounded-lg border border-gray-200 px-4 pb-10 pt-4">
            {message}
          </div>
        </div>
      )}
      {message && content?.text === StatusContent.denied.text && (
        <div className="mt-4 flex flex-col gap-2">
          <p className="font-medium text-gray-500">İptal Nedeni</p>
          <div className="rounded-lg border border-gray-200 px-4 pb-10 pt-4">
            {message}
          </div>
        </div>
      )}
    </div>
  );
}

export { StatusText };