import { ArrowUpFromLineIcon } from "lucide-react";
import React from "react";
import { useTranslation } from "react-i18next";
import { TAllowedFileExtension } from "@formbricks/types/storage";
import { cn } from "@/lib/cn";
import { showStorageNotConfiguredToast } from "@/modules/ui/components/storage-not-configured-toast/lib/utils";

interface UploaderProps {
  id: string;
  name: string;
  ref?: React.RefObject<HTMLInputElement>;
  handleDragOver: (e: React.DragEvent<HTMLLabelElement>) => void;
  uploaderClassName: string;
  handleDrop: (e: React.DragEvent<HTMLLabelElement>) => void;
  allowedFileExtensions: TAllowedFileExtension[];
  multiple: boolean;
  handleUpload: (files: File[]) => void;
  uploadMore?: boolean;
  disabled?: boolean;
  isStorageConfigured: boolean;
}

export const Uploader = ({
  id,
  name,
  ref,
  handleDragOver,
  uploaderClassName,
  handleDrop,
  allowedFileExtensions,
  multiple,
  handleUpload,
  uploadMore = false,
  disabled = false,
  isStorageConfigured = true,
}: UploaderProps) => {
  const { t } = useTranslation();
  return (
    <label // NOSONAR - This is a label for a file input, we need the onClick to trigger storage not configured toast
      htmlFor={`${id}-${name}`}
      data-testid="upload-file-label"
      className={cn(
        "relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-700",
        uploaderClassName,
        disabled
          ? "cursor-not-allowed opacity-50"
          : "hover:bg-slate-100 dark:hover:border-slate-500 dark:hover:bg-slate-800"
      )}
      tabIndex={disabled ? -1 : 0}
      aria-disabled={disabled}
      onDragOver={(e) => {
        e.preventDefault();
        e.stopPropagation();

        if (!isStorageConfigured) {
          showStorageNotConfiguredToast();
          return;
        }

        if (!disabled) {
          handleDragOver(e);
        }
      }}
      onDrop={(e) => {
        e.preventDefault();
        e.stopPropagation();

        if (!isStorageConfigured) {
          showStorageNotConfiguredToast();
          return;
        }

        if (!disabled) {
          handleDrop(e);
        }
      }}
      onClick={(e) => {
        if (!isStorageConfigured) {
          e.preventDefault();
          e.stopPropagation();
          showStorageNotConfiguredToast();
        }
      }}>
      <div className="flex flex-col items-center justify-center pb-6 pt-5">
        <ArrowUpFromLineIcon className="h-6 text-slate-500" />
        <p className={cn("mt-2 text-center text-sm text-slate-500", uploadMore && "text-xs")}>
          <span className="font-semibold">{t("common.upload_input_description")}</span>
        </p>
        <input
          data-testid="upload-file-input"
          type="file"
          id={`${id}-${name}`}
          name={`${id}-${name}`}
          accept={allowedFileExtensions.map((ext) => `.${ext}`).join(",")}
          className="hidden"
          multiple={multiple}
          disabled={disabled}
          ref={ref}
          onChange={async (e) => {
            if (!isStorageConfigured) {
              showStorageNotConfiguredToast();
              return;
            }

            let selectedFiles = Array.from(e.target?.files || []);
            handleUpload(selectedFiles);
          }}
        />
      </div>
    </label>
  );
};
