import { useRef } from 'react';
import { ImagePreview } from '@filerobot/common';
import getFileExtension from '@filerobot/utils/lib/getFileExtension';
import getItemIcon from '@filerobot/utils/lib/getItemIcon';
import isTransparencySupported from '@filerobot/utils/lib/isTransparencySupported';
import DetailsTabContent from './DetailsTabContent';
import Styled from '../DetailsSideBar.styled';
import { useExplorer } from '../../../hooks';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var FileItem = function FileItem(_ref) {
  var file = _ref.file,
    details = _ref.details;
  var _useExplorer = useExplorer(),
    isDevEnv = _useExplorer.isDevEnv,
    container = _useExplorer.container,
    floaty = _useExplorer.opts.floaty;
  var imageContainerRef = useRef();
  var imageRef = useRef();
  var extension = getFileExtension(file);
  var isImageTransparencySupported = isTransparencySupported(file);
  var itemIconString = getItemIcon({
    fileOrFolder: file
  });
  var name = file.name,
    _file$info = file.info,
    _file$info2 = _file$info === void 0 ? {} : _file$info,
    thumbnail = _file$info2.thumbnail,
    preview = _file$info2.preview,
    _file$size = file.size,
    _file$size2 = _file$size === void 0 ? {} : _file$size,
    bytes = _file$size2.bytes;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Styled.SideDetailsTitle, {
      children: name
    }), /*#__PURE__*/_jsx(Styled.FilePreview, {
      children: /*#__PURE__*/_jsx(ImagePreview, {
        containerClassName: "filerobot-Explorer-Details-imageContainer",
        size: bytes,
        srcUrl: itemIconString,
        thumbnailUrl: thumbnail,
        previewUrl: preview,
        isFileDetailsPreview: true,
        extension: extension,
        containerRef: imageContainerRef,
        innerRef: imageRef,
        isTransparencySupported: isImageTransparencySupported,
        isDevEnv: isDevEnv,
        isHubMode: floaty,
        container: container,
        containerHeight: "auto"
      })
    }), /*#__PURE__*/_jsx(DetailsTabContent, {
      file: file,
      details: details
    })]
  });
};
export default FileItem;