'use strict';
'use client';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import '../../../fd-component-toolbox/client/framework/index.js';
import { useState } from 'react';
import { supportedImageTypes, supportedVideoTypes, supportedImageExtensions, supportedVideoExtensions } from '../../../../fd-toolbox/constants/file-loader-data-types.js';
import { Icon, iconNames, iconSizes } from '../../../fd-component-toolbox/icon/Icon.js';
import { onInitUpload, onFileUploadHandler, handleFileDelete } from './FileUpload.funcs.js';
import { FormMessage } from '../../../fd-component-toolbox/form/Form.js';
import { LabelAnimation } from '../../../fd-component-toolbox/animation/LabelAnimation.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { PreviewMedia } from './PreviewMedia.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
import FrameworkImage from 'next/image.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function FileUpload({
  allowMultiple,
  value,
  required,
  label,
  isNew,
  relatedResourceId,
  propertyMeta,
  onChange,
  onFileDelete
}) {
  const [files, setFiles] = useState([]);
  const [error, setError] = useState(void 0);
  const [imageValue, setImageValue] = useState(value ?? "");
  const [fullscreenFile, setFullscreenFile] = useState(void 0);
  const fileInputRef = useEmptyRef();
  const isMoreFilesAllowed = !!allowMultiple || !allowMultiple && files.length === 0;
  const hasFile = imageValue !== "" || files.length > 0;
  const acceptedFileFormats = [...supportedImageTypes, ...supportedVideoTypes, ...supportedImageExtensions, ...supportedVideoExtensions].join(",");
  useAsyncEffect(async () => {
    if (value) {
      onInitUpload(setFiles, value);
    }
  }, [value]);
  const onFileUpload = /* @__PURE__ */__name(event => onFileUploadHandler(isMoreFilesAllowed, setFiles, setError, fileInputRef?.current ?? void 0, event.target?.files ?? void 0, propertyMeta, relatedResourceId, isNew, onChange), "onFileUpload");
  return /* @__PURE__ */jsxs(Fragment, {
    children: [/* @__PURE__ */jsxs("div", {
      className: "relative mt-1 flex w-full flex-wrap items-center gap-4 select-none",
      children: [/* @__PURE__ */jsx(LabelAnimation, {
        label: required ? `${label ?? ""} *` : label ?? "",
        className: cn("absolute left-1.5 -translate-y-5 scale-75", (required && !hasFile) ?? (error && "text-destructive"))
      }), /* @__PURE__ */jsx("input", {
        type: "file",
        ref: fileInputRef,
        multiple: allowMultiple,
        accept: acceptedFileFormats,
        id: "uploadFileInput",
        className: "hidden",
        onChange: onFileUpload,
        required
      }), isMoreFilesAllowed && /* @__PURE__ */jsx(Button, {
        variant: "icon",
        className: "size-fit p-0",
        children: /* @__PURE__ */jsx("label", {
          htmlFor: "uploadFileInput",
          className: "cursor-pointer",
          children: /* @__PURE__ */jsxs("div", {
            className: "border-border hover:bg-muted flex size-20 items-center justify-center gap-1 rounded-md border bg-transparent",
            children: [/* @__PURE__ */jsx(Icon, {
              name: iconNames.upload,
              color: "text-fd-accent"
            }), /* @__PURE__ */jsx("span", {
              className: "text-muted-foreground text-xs font-medium",
              children: "Upload"
            })]
          })
        })
      }), files.map((file, index) => /* @__PURE__ */jsxs("div", {
        className: "border-border group relative flex size-20 items-center justify-center rounded-md border p-1.5 hover:border-transparent",
        children: [/* @__PURE__ */jsx(FrameworkImage, {
          src: file.preview ?? file.url,
          alt: `Uploaded file ${index}`,
          width: 128,
          height: 128,
          className: "size-full rounded-md object-cover transition-all group-hover:blur-xs"
        }), /* @__PURE__ */jsxs("div", {
          className: "absolute inset-0 flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-100",
          children: [/* @__PURE__ */jsxs(Button, {
            variant: "icon",
            className: "inset-0 size-full w-fit rounded-md p-0 opacity-0 transition-opacity group-hover:opacity-100",
            onClick: () => handleFileDelete(index, files, setFiles, setImageValue, onFileDelete),
            children: [/* @__PURE__ */jsx(Icon, {
              name: iconNames.trash,
              size: iconSizes.extralarge,
              className: "text-fd-tertiary-50 relative z-10 drop-shadow-md"
            }), /* @__PURE__ */jsx("div", {
              className: "bg-muted-foreground/45 absolute inset-0 size-full rounded-md"
            })]
          }), /* @__PURE__ */jsxs("div", {
            className: "flex cursor-pointer items-center justify-center rounded-md",
            onClick: () => setFullscreenFile(file),
            children: [/* @__PURE__ */jsx("div", {
              className: "bg-muted-foreground/45 inset-0 rounded-sm"
            }), /* @__PURE__ */jsx(Icon, {
              name: file.preview ? iconNames.playIcon : iconNames.image,
              size: iconSizes.medium,
              className: "text-fd-tertiary-50 relative z-10 drop-shadow-md"
            })]
          })]
        })]
      }, file.url))]
    }), required && !hasFile && /* @__PURE__ */jsx("div", {
      className: "mt-3",
      children: /* @__PURE__ */jsxs(FormMessage, {
        className: "text-destructive -mt-6",
        children: [label, " is required"]
      })
    }), fullscreenFile && /* @__PURE__ */jsx(PreviewMedia, {
      file: fullscreenFile,
      onClose: () => setFullscreenFile(void 0)
    })]
  });
}
__name(FileUpload, "FileUpload");

export { FileUpload };
