import React, { useMemo } from 'react';
import useEngineContext from "../../../../../../hooks/useEngineContext";
import { PREFIX } from "../../status";
import "./index.less";
var Title = function Title(_ref) {
  var _engineContext$appHel2;
  var props = _ref.props;
  var dataSource = props.dataSource,
    skuTextConfig = props.skuTextConfig;
  var engineContext = useEngineContext();
  var _engineContext$appHel = (_engineContext$appHel2 = engineContext.appHelper) === null || _engineContext$appHel2 === void 0 ? void 0 : _engineContext$appHel2.utils,
    translation = _engineContext$appHel.translation;
  var _ref2 = (skuTextConfig === null || skuTextConfig === void 0 ? void 0 : skuTextConfig.skuNameConfig) || {},
    isOpen = _ref2.isOpen,
    value = _ref2.value,
    fontSize = _ref2.fontSize,
    fontWeight = _ref2.fontWeight,
    color = _ref2.color,
    ellipsisCount = _ref2.ellipsisCount;
  if (!isOpen) return null;
  var finalStyle = useMemo(function () {
    return {
      fontSize: fontSize,
      fontWeight: fontWeight,
      color: color,
      lineClamp: ellipsisCount
    };
  }, [fontSize, fontWeight, color, ellipsisCount]);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__card-title"),
    style: finalStyle
  }, translation(value || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.title)));
};
export default Title;