"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CustomFieldsViewWidgetSection = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _designSystem = require("@wix/design-system");
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@wix/bex-core/react");
var _mobxReactLite = require("mobx-react-lite");
var _FileCardList = require("../FileCard/FileCardList");
var _datesUtil = require("../../utils/datesUtil");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldsWidget/CustomFieldsViewWidgetSection.tsx";
const _CustomFieldsViewWidgetSection = ({
  customFields,
  fieldValues,
  namespace,
  title
}) => {
  const container = (0, _react2.useWixPatternsContainer)();
  const {
    translate: t,
    dateFormatters
  } = container;
  const valueWrapper = (value, props) => {
    if (typeof value === 'string' && !/\s/.test(value)) {
      // if there are no space symbols we apply ellipsis (e.g. for links, emails, etc.)
      return /*#__PURE__*/_react.default.createElement(_designSystem.Text, (0, _extends2.default)({}, props, {
        overflowWrap: "break-word",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 37,
          columnNumber: 9
        }
      }), value);
    }
    if (typeof value !== 'string' && /*#__PURE__*/_react.default.isValidElement(value)) {
      return value;
    }
    return /*#__PURE__*/_react.default.createElement(_designSystem.Text, (0, _extends2.default)({}, props, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 12
      }
    }), value);
  };
  const getViewValue = (value, type, valueDataHook) => {
    const textProps = {
      dataHook: valueDataHook,
      size: 'small',
      secondary: true
    };

    // It is relevant only to app sections. User fields that are null/undefined will be filtered before and won't be displayed
    if (value === undefined || value === null) {
      return valueWrapper('-', textProps);
    }
    let newValue = value;
    switch (type) {
      case 'dropdown':
        {
          newValue = value;
          break;
        }
      case 'multiSelect':
        {
          newValue = value.join(', ');
          break;
        }
      case 'files':
        {
          const files = Array.isArray(value) ? value : [value];
          return /*#__PURE__*/_react.default.createElement(_FileCardList.FileCardList, {
            files: files,
            showDownloadCTA: true,
            showDetails: true,
            __self: void 0,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 78,
              columnNumber: 16
            }
          });
        }
      case 'date':
        newValue = dateFormatters.medium.format((0, _datesUtil.getDateWithoutTimezone)(value));
        break;
      case 'dateTime':
        newValue = dateFormatters.mediumTime.format(new Date(value));
        break;
      case 'checkbox':
        newValue = value ? t('cairo.customFields.booleanValue.true') : t('cairo.customFields.booleanValue.false');
        break;
      case 'url':
        newValue = /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
          as: "a",
          rel: "noopener",
          target: "_blank",
          size: "small",
          href: value,
          ellipsis: true,
          dataHook: valueDataHook,
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 93,
            columnNumber: 11
          }
        }, value);
        break;
      default:
        break;
    }
    return valueWrapper(newValue, textProps);
  };
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: "100%",
    direction: "vertical",
    dataHook: `custom-field-section-${namespace}`,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 113,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    gap: "SP3",
    dataHook: `custom-field-section-${namespace}`,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 118,
      columnNumber: 7
    }
  }, title && /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 12,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
    size: "tiny",
    ellipsis: true,
    dataHook: `custom-field-section-title-${namespace}`,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 13
    }
  }, title)), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    span: 12,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 130,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    display: "grid",
    rowGap: "18PX",
    columnGap: "24PX",
    gridTemplateColumns: "repeat(auto-fill, minmax(248px, 1fr))",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 11
    }
  }, customFields.map(field => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    key: field.id,
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    minWidth: "248px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(CustomFieldCell, {
    key: field.id,
    field: field,
    value: getViewValue(fieldValues[field.id], field.type, `custom-field-value-${namespace}-${field.id}`),
    labelDataHook: `custom-field-label-${namespace}-${field.id}`,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 145,
      columnNumber: 17
    }
  })))))));
};
const CustomFieldsViewWidgetSection = exports.CustomFieldsViewWidgetSection = (0, _mobxReactLite.observer)(_CustomFieldsViewWidgetSection);
const CustomFieldCell = ({
  field,
  value,
  labelDataHook
}) => {
  return /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    key: field.id,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 178,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 179,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    weight: "normal",
    size: "small",
    ellipsis: true,
    dataHook: labelDataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 180,
      columnNumber: 9
    }
  }, field.label || field.id, ":"), value));
};
//# sourceMappingURL=CustomFieldsViewWidgetSection.js.map