import { memo, useRef } from 'react';
import { ImagePreview } from '@filerobot/common';
import humanReadableDateWithTranslations from '@filerobot/utils/lib/humanReadableDateWithTranslations';
import prettyFileSize from '@filerobot/utils/lib/prettyFileSize';
import { IconButton } from '@scaleflex/ui/core';
import { More } from '@scaleflex/icons';
import { toLocaleNumber } from '@filerobot/utils/lib/formatNumbers';
import getItemIcon from '@filerobot/utils/lib/getItemIcon';
import isTransparencySupported from '@filerobot/utils/lib/isTransparencySupported';
import addUrlParams from '@filerobot/utils/lib/addUrlParams';
import { useExplorer } from '../../../../hooks';
import StyledVersioningTab from './VersioningTab.styled';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var VersionItem = function VersionItem(_ref) {
  var _version$url;
  var toggleContextMenu = _ref.toggleContextMenu,
    version = _ref.version,
    isCurrentVersion = _ref.isCurrentVersion,
    isPreviewing = _ref.isPreviewing,
    _onClick = _ref.onClick,
    isOneVersionOnly = _ref.isOneVersionOnly,
    file = _ref.file;
  var uuid = version.uuid,
    extension = version.extension,
    size = version.size,
    modifiedAt = version.modified_at,
    modifiedBy = version.modified_by,
    _version$info = version.info,
    info = _version$info === void 0 ? {} : _version$info;
  var _useExplorer = useExplorer(),
    i18n = _useExplorer.i18n,
    isDevEnv = _useExplorer.isDevEnv,
    container = _useExplorer.container,
    _useExplorer$opts = _useExplorer.opts,
    floaty = _useExplorer$opts.floaty,
    _useExplorer$opts$con = _useExplorer$opts.config,
    _useExplorer$opts$con2 = _useExplorer$opts$con === void 0 ? {} : _useExplorer$opts$con,
    numberFormatLocale = _useExplorer$opts$con2.numberFormatLocale;
  var formattedItemWidth = toLocaleNumber(info.img_w || info.video_w, numberFormatLocale);
  var formattedItemHeight = toLocaleNumber(info.img_h || info.video_h, numberFormatLocale);
  var formattedSize = toLocaleNumber(prettyFileSize(size), numberFormatLocale);
  var itemDimensionsInfo = formattedItemWidth && formattedItemHeight ? " \u2022 ".concat(formattedItemWidth, "\xD7").concat(formattedItemHeight) : '';
  var imageContainerRef = useRef();
  var imageRef = useRef();
  var fileInfo = version.info || {};
  var itemIconString = getItemIcon({
    fileOrFolder: version,
    showFuncAndHeight: !(extension || fileInfo.ext || fileInfo.img_type).includes('gif')
  });
  return /*#__PURE__*/_jsxs(StyledVersioningTab.VersionItemWrapper, {
    isPreviewing: isPreviewing,
    onClick: function onClick() {
      return _onClick(version);
    },
    $isOneVersionOnly: isOneVersionOnly,
    children: [/*#__PURE__*/_jsxs(StyledVersioningTab.VersionImgWrapper, {
      children: [isCurrentVersion && /*#__PURE__*/_jsx(StyledVersioningTab.CurrentVersionLabel, {
        label: i18n('versionedTabCurrentLabel')
      }), /*#__PURE__*/_jsx(ImagePreview, {
        size: size.bytes,
        thumbnailUrl: addUrlParams(version === null || version === void 0 ? void 0 : (_version$url = version.url) === null || _version$url === void 0 ? void 0 : _version$url.version_preview_link, {
          w: 200
        }),
        srcUrl: itemIconString,
        isVersioningItem: true,
        extension: extension,
        containerRef: imageContainerRef,
        innerRef: imageRef,
        isDevEnv: isDevEnv,
        isHubMode: floaty,
        container: container,
        containerHeight: "auto",
        isTransparencySupported: isTransparencySupported(file)
      })]
    }), /*#__PURE__*/_jsxs(StyledVersioningTab.VersionDetails, {
      children: [/*#__PURE__*/_jsx(StyledVersioningTab.VersionDetailsBy, {
        children: "".concat(i18n('versioningTabUpdatedText')).concat(modifiedBy ? " ".concat(i18n('mutualizedByText'), " ").concat(modifiedBy) : '', " ").concat(humanReadableDateWithTranslations(modifiedAt, i18n))
      }), /*#__PURE__*/_jsx(StyledVersioningTab.VersionDetailsId, {
        children: "".concat(i18n('versionedTabVersioningID'), ": ").concat(uuid)
      }), /*#__PURE__*/_jsx(StyledVersioningTab.VersionDetailsMeta, {
        children: "".concat(extension, " \u2022 ").concat(formattedSize).concat(itemDimensionsInfo)
      })]
    }), !isCurrentVersion && /*#__PURE__*/_jsx(IconButton, {
      color: "basic",
      onClick: function onClick(event) {
        return toggleContextMenu({
          event: event,
          version: version
        });
      },
      children: /*#__PURE__*/_jsx(More, {})
    })]
  });
};
export default /*#__PURE__*/memo(VersionItem);