"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.PickerStandaloneLayoutTitles = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _mobxReactLite = require("mobx-react-lite");
var _react = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
var _MaxHeightText = require("../MaxHeightText");
var _ModalHeadingBox = require("../ModalHeadingBox");
var _Heading = require("../Heading");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/PickerStandaloneLayout/PickerStandaloneLayoutTitles.tsx";
function _PickerStandaloneLayoutTitles(props) {
  const {
    state,
    defaultTitle,
    defaultSubtitle,
    titleMaxLines = 2,
    ...rest
  } = props;
  const {
    title: titleFromUrl,
    subtitle: subtitleFromUrl,
    isMobileView
  } = state;
  const title = titleFromUrl ?? defaultTitle;
  const subtitle = subtitleFromUrl ?? defaultSubtitle;
  const {
    titlesContainerProps,
    textProps
  } = isMobileView ? {
    titlesContainerProps: {
      paddingLeft: 'SP4',
      paddingRight: 'SP4',
      align: 'left'
    },
    textProps: {
      textAlign: 'left'
    }
  } : {
    titlesContainerProps: {
      paddingLeft: 'SP7',
      paddingRight: 'SP7',
      gap: 'SP1',
      align: 'center'
    },
    textProps: {
      textAlign: 'center'
    }
  };
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, (0, _extends2.default)({
    display: "grid"
  }, rest, titlesContainerProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement(_ModalHeadingBox.ModalHeadingBox, (0, _extends2.default)({
    dataHook: "picker-standalone-title",
    maxLines: titleMaxLines,
    lineHeight: 36,
    width: "100%"
  }, textProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
    size: "large",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 11
    }
  }, title))), subtitle && /*#__PURE__*/_react.default.createElement(_ModalHeadingBox.ModalHeadingBox, (0, _extends2.default)({
    lineHeight: 24,
    maxLines: 1,
    dataHook: "picker-standalone-subtitle"
  }, textProps, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_MaxHeightText.MaxHeightText, {
    lineHeight: 24,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 86,
      columnNumber: 13
    }
  }, subtitle))));
}
const PickerStandaloneLayoutTitles = exports.PickerStandaloneLayoutTitles = (0, _mobxReactLite.observer)(_PickerStandaloneLayoutTitles);
//# sourceMappingURL=PickerStandaloneLayoutTitles.js.map