"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InlinePreviewStory;

var _icons = require("@sanity/icons");

var _ui = require("@sanity/ui");

var _uiWorkshop = require("@sanity/ui-workshop");

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _inlinePreview = require("../inlinePreview");

var _templateObject;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var PreviewWrapper = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: top;\n  background-color: var(--card-bg-color);\n  box-shadow: inset 0 0 0 1px var(--card-border-color);\n  border-radius: 2.66px;\n  padding: 2px;\n  margin-top: 0.0625em;\n  height: calc(1em - 1px);\n\n  & > span {\n    vertical-align: top;\n    margin: 0;\n  }\n"])));

function InlinePreviewStory() {
  var title = (0, _uiWorkshop.useString)('Title', 'Inline object', 'Props');
  var withImage = (0, _uiWorkshop.useBoolean)('With image', true, 'Props');
  return /*#__PURE__*/_react.default.createElement(_ui.Card, {
    height: "fill"
  }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
    align: "center",
    height: "fill",
    justify: "center",
    padding: 4,
    sizing: "border"
  }, /*#__PURE__*/_react.default.createElement(_ui.Container, {
    width: 1
  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
    space: 4
  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
    tone: "primary"
  }, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
    size: 5
  }, "Hello", ' ', /*#__PURE__*/_react.default.createElement(PreviewWrapper, null, /*#__PURE__*/_react.default.createElement(_inlinePreview.InlinePreview // eslint-disable-next-line react/jsx-no-bind
  , {
    media: () => withImage ? /*#__PURE__*/_react.default.createElement("img", {
      src: "https://source.unsplash.com/60x60/?face"
    }) : /*#__PURE__*/_react.default.createElement(_icons.DocumentIcon, null),
    title: title
  })), ' ', "world")), /*#__PURE__*/_react.default.createElement(_ui.Card, {
    tone: "primary"
  }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, "Hello", ' ', /*#__PURE__*/_react.default.createElement(PreviewWrapper, null, /*#__PURE__*/_react.default.createElement(_inlinePreview.InlinePreview // eslint-disable-next-line react/jsx-no-bind
  , {
    media: () => withImage ? /*#__PURE__*/_react.default.createElement("img", {
      src: "https://source.unsplash.com/60x60/?face"
    }) : /*#__PURE__*/_react.default.createElement(_icons.DocumentIcon, null),
    title: title
  })), ' ', "world")), /*#__PURE__*/_react.default.createElement(_ui.Card, {
    tone: "primary"
  }, /*#__PURE__*/_react.default.createElement(_ui.Text, null, "Hello", ' ', /*#__PURE__*/_react.default.createElement(PreviewWrapper, null, /*#__PURE__*/_react.default.createElement(_inlinePreview.InlinePreview // eslint-disable-next-line react/jsx-no-bind
  , {
    media: () => withImage ? /*#__PURE__*/_react.default.createElement("img", {
      src: "https://source.unsplash.com/60x60/?face"
    }) : /*#__PURE__*/_react.default.createElement(_icons.DocumentIcon, null),
    title: title
  })), ' ', "world"))))));
}