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

const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
  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-${sm} col-md-${md} 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 `}
                  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>
  );
};
export const FileView = ({ file, viewFile }) => {
  if (!file) {
    return (
      <div className="d-flex justify-content-center align-items-center py-4">
        <p className="mb-0 text-muted small">No file uploaded</p>
      </div>
    );
  }

  return (
    <div className=" bg-white ">
      <div className="row align-items-center">
        {/* File icon and info */}
        <div className="col-12 d-flex align-items-center gap-2 ms-n1">
          <i className={`bx ${getIconByFileType(file?.fileName)} fs-4`}></i>

          <div
            className="d-flex flex-column text-truncate"
            onClick={(e) => {
              e.preventDefault();
              viewFile({
                IsOpen: true,
                Image: file.preSignedUrl,
              });
            }}
          >
            <span className="text-muted small text-truncate mb-n4">
              {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>
  );
};