import React__default, { forwardRef } from 'react';
import { IconCloseCircleOutline } from '../../../_Icon/Icons/IconCloseCircleOutline.js';
import { StyledIconButtonCancel } from '../IconButton/IconButton.styles.js';
import { FilenameExtensionPart, TruncatedFilenamePart, FilenameWrapper } from '../../Attach.styles.js';
import { StyledCell } from './Cell.styles.js';

var _IconCloseCircleOutli;
var CellUI = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var size = _ref.size,
    cellContentLeft = _ref.cellContentLeft,
    multiple = _ref.multiple,
    flow = _ref.flow,
    filenameWithoutExtension = _ref.filenameWithoutExtension,
    extension = _ref.extension,
    isHelper = _ref.isHelper,
    isInsideDropdown = _ref.isInsideDropdown,
    onClick = _ref.onClick;
  var textNode = isHelper ? /*#__PURE__*/React__default.createElement(FilenameExtensionPart, null, filenameWithoutExtension, ".", extension) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TruncatedFilenamePart, {
    applyEllipsis: !multiple || flow !== 'horizontal'
  }, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/React__default.createElement(FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension));
  return /*#__PURE__*/React__default.createElement(StyledCell, {
    ref: ref,
    stretching: "fixed",
    size: size,
    contentLeft: cellContentLeft,
    contentRight: /*#__PURE__*/React__default.createElement(StyledIconButtonCancel, {
      onClick: onClick
    }, _IconCloseCircleOutli || (_IconCloseCircleOutli = /*#__PURE__*/React__default.createElement(IconCloseCircleOutline, {
      size: "xs",
      color: "inherit"
    })))
  }, /*#__PURE__*/React__default.createElement(FilenameWrapper, {
    isInsideDropdown: isInsideDropdown
  }, textNode));
});

export { CellUI };
