import React from "react";
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
import Tooltip from "../common/Tooltip";

const Filelist = ({ files, removeFile, expenseToEdit }) => {
  return (
    <div className="d-flex flex-wrap gap-2 my-1">
  {files
    .filter((file) => {
      if (expenseToEdit) {
        return file.isActive;
      }
      return true;
    })
    .map((file, idx) => (
      <div className="col-12 col-sm-6 col-md-4 mb-2" key={idx}>
        <div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
          {/* File icon and info */}
          <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
            <i
              className={`bx ${getIconByFileType(
                file?.contentType
              )} fs-3 text-primary`}
              style={{ minWidth: "30px" }}
            ></i>

            <div className="d-flex flex-column text-truncate">
              <span className="fw-semibold small text-truncate">
                {file.fileName}
              </span>
              <span className="text-body-secondary small">
                {file.fileSize ? formatFileSize(file.fileSize) : ""}
              </span>
            </div>
          </div>

          {/* Delete icon */}
          <Tooltip text="Remove file">
            <i
              className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
              role="button"
              onClick={(e) => {
                e.preventDefault();
                removeFile(expenseToEdit ? file.documentId : idx);
              }}
            ></i>
          </Tooltip>
        </div>
      </div>
    ))}
</div>

  );
};

export default Filelist;
export const FilelistView = ({ files, viewFile }) => {
  return (
    <div className="d-flex flex-wrap gap-2 mt-2">
      {files?.map((file, idx) => (
        <div className=" bg-white  " key={idx}>
          <div className="row align-items-center">
            {/* File icon and info */}
            <div className="col-12 d-flex align-items-center gap-2">
              <i
                className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
              ></i>

              <div
                className="d-flex flex-column text-truncate"
                onClick={(e) => {
                  e.preventDefault();
                  viewFile({
                    IsOpen: true,
                    Image: file.preSignedUrl,
                  });
                }}
              >
                <span className="fw-medium small text-truncate">
                  {file.fileName}
                </span>
                <span className="text-body-secondary small">
                  <Tooltip text={"Click on file"}>
                    {" "}
                    {file.fileSize ? formatFileSize(file.fileSize) : ""}
                  </Tooltip>
                </span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};