import React from 'react';
import { ProductDescription } from '../ProductDescription';
import { ImageVariants } from '../Image/types';
import { Image } from '../Image';
import { Navigation } from '../Navigation';
import { Guard } from '../Guard';

function viewport() {
  // This has to be loaded some globaly
  document.documentElement.style.setProperty('--viewport-height', "".concat(window.innerHeight, "px"));
}

viewport();
window.addEventListener('resize', viewport);
export var ProductDetail = function ProductDetail(_ref) {
  var title = _ref.title,
      category = _ref.category,
      description = _ref.description,
      price = _ref.price,
      action = _ref.action,
      onAdd = _ref.onAdd,
      image = _ref.image,
      children = _ref.children;
  var productDescriptionProps = {
    title: title,
    category: category,
    description: description,
    price: price,
    action: action,
    onAdd: onAdd
  };
  var navigationProps = {
    className: 'position-absolute',
    style: {
      left: 0,
      right: 0
    }
  };
  return React.createElement("div", {
    className: "product-detail"
  }, React.createElement("div", {
    className: "container-fluid h-100"
  }, React.createElement("div", {
    className: "row h-100 align-items-end align-items-sm-center"
  }, React.createElement("div", {
    className: "image-column col-lg-7 col-sm-12"
  }, React.createElement("div", {
    className: "w-100 position-relative"
  }, React.createElement(Guard, {
    Component: Navigation,
    props: navigationProps
  }, children)), React.createElement("div", {
    className: "image-wrapper"
  }, React.createElement(Image, {
    src: image,
    variant: ImageVariants.BACKGROUND
  }))), React.createElement("div", {
    className: "description-column col-lg-5 col-sm-12"
  }, React.createElement(ProductDescription, productDescriptionProps)))));
};