"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SingleItem = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

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

var _Images = require("./Components/Images");

var _lib = require("@sentecacommerce-theme/lib");

var _Common = require("../../../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;

var SingleItem = function SingleItem(_ref) {
  var _trackingData$, _trackingData$2;

  var order = _ref.order;

  var _useOrder = (0, _lib.useOrder)({
    data: order
  }),
      lineItems = _useOrder.lineItems,
      status = _useOrder.status,
      orderRefNumber = _useOrder.orderRefNumber,
      createdAt = _useOrder.createdAt,
      trackingData = _useOrder.trackingData;

  var _useOrderPrice = (0, _lib.useOrderPrice)(order),
      discountedSubtotal = _useOrderPrice.discountedSubtotal,
      taxedPrice = _useOrderPrice.taxedPrice;

  var labels = (0, _lib.useLocalLabels)();

  var _usePrice = (0, _lib.usePrice)({
    price: taxedPrice,
    discountedPrice: discountedSubtotal
  }),
      price = _usePrice.price;

  var trackUrl = trackingData == null ? void 0 : (_trackingData$ = trackingData[0]) == null ? void 0 : _trackingData$.trackingUrl;
  var date = new Date(createdAt);
  var day = date == null ? void 0 : date.getDate().toString().padStart(2, '0');
  var month = (date.getMonth() + 1).toString().padStart(2, '0');
  return /*#__PURE__*/_react["default"].createElement(OrderContainer, null, /*#__PURE__*/_react["default"].createElement(Header, null, /*#__PURE__*/_react["default"].createElement(Left, null, /*#__PURE__*/_react["default"].createElement(Title, null, labels.orderFrom, " ", day, "/", month, "/", date.getFullYear()), /*#__PURE__*/_react["default"].createElement(OrderNumber, null, trackUrl && /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: trackUrl
  }, trackingData == null ? void 0 : (_trackingData$2 = trackingData[0]) == null ? void 0 : _trackingData$2.trackingId))), /*#__PURE__*/_react["default"].createElement(Price, null, price.displayValue)), /*#__PURE__*/_react["default"].createElement(OrderContent, null, /*#__PURE__*/_react["default"].createElement(OrderInfo, null, /*#__PURE__*/_react["default"].createElement(Created, null, labels.orderNum, " ", orderRefNumber), /*#__PURE__*/_react["default"].createElement(Row, {
    status: status
  }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    variant: "light",
    disabled: true,
    small: true
  }, labels.status, ": ", status), /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    bordered: true,
    small: true,
    link: "/order/" + order._id
  }, labels.viewDetails))), /*#__PURE__*/_react["default"].createElement(ProductImage, {
    mobile: false
  }, lineItems && (lineItems == null ? void 0 : lineItems.length) > 3 ? lineItems == null ? void 0 : lineItems.slice(0, 3).map(function (product, i) {
    return /*#__PURE__*/_react["default"].createElement(_Images.Images, {
      key: "Image-" + product._id + "--" + i,
      product: product
    });
  }) : lineItems == null ? void 0 : lineItems.map(function (product, i) {
    return /*#__PURE__*/_react["default"].createElement(_Images.Images, {
      key: "Image-" + product._id + "--" + i,
      product: product
    });
  }), lineItems && (lineItems == null ? void 0 : lineItems.length) > 3 && /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: "/order/" + order._id
  }, /*#__PURE__*/_react["default"].createElement(MoreDetails, null, "+"))), /*#__PURE__*/_react["default"].createElement(ProductImage, {
    mobile: true
  }, /*#__PURE__*/_react["default"].createElement(_Common.ScrollView, {
    maxWidth: "85vw",
    overflowDirection: "x"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex flex-nowrap"
  }, lineItems == null ? void 0 : lineItems.map(function (product, i) {
    return /*#__PURE__*/_react["default"].createElement(_Images.Images, {
      key: "Image-" + product._id + "--" + i,
      product: product
    });
  }))))));
};

exports.SingleItem = SingleItem;

var OrderContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex px-2 mb-5'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n\n  @media (min-width: ", ") {\n    width: 1rem; //To override the width: 90vw\n    min-width: 87rem;\n  }\n  flex-direction: column;\n  height: fit-content;\n  box-shadow: 0 2px 5px 2px #e3e3e3;\n  border-radius: 5px;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Header = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 6rem;\n  align-items: baseline;\n  border-bottom: 1px solid #eee;\n  @media (max-width: ", ") {\n    height: fit-content;\n    flex-direction: column;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.max;
});

var Left = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Price = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: '',
  variant: 4
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    font-size: 1.5rem;\n    margin: 1rem 0 0 auto;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.max;
});

var Title = _styledComponents["default"].div.attrs({
  className: 'px-2 my-auto'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 2.3rem;\n  font-weight: 600;\n  @media (max-width: ", ") {\n    font-size: 2rem;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.max;
});

var OrderNumber = _styledComponents["default"].span.attrs({
  className: 'px-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1rem;\n  line-height: 2rem;\n  width: fit-content;\n  color: #555;\n  margin-top: -1rem;\n  text-decoration: underline;\n  cursor: pointer;\n"])));

var OrderContent = _styledComponents["default"].div.attrs({
  className: 'd-flex p-2 my-1'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.max;
});

var OrderInfo = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between py-2'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: column;\n  max-width: 35rem;\n  @media (max-width: ", ") {\n    max-width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.md.max;
});

var Row = _styledComponents["default"].div.attrs({
  className: ' mt-auto'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  align-items: center;\n  > * {\n    width: ", ";\n    height: 4rem;\n    font-size: 1.5rem !important;\n    margin-right: 1rem;\n    @media (max-width: ", ") {\n      margin-bottom: 1rem;\n    }\n  }\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
  return props.status === 'Open' || props.status === 'Draft' ? '13rem' : '16rem';
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.md.max;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.md.max;
});

var DeliveryInfo = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex-direction: column;\n  align-items: start;\n  width: 100%;\n"])));

var Created = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.5rem;\n"])));

var ProductImage = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: "align-items-center " + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-left: ", ";\n  cursor: pointer;\n  display: ", ";\n  & picture {\n    width: 13rem;\n    padding-bottom: 150px !important;\n  }\n"])), function (props) {
  return props.mobile ? '' : 'auto';
}, function (props) {
  return props.mobile ? 'none' : 'flex';
});

var MoreDetails = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center align-items-center'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 120px;\n  width: 100px;\n  font-size: 5rem;\n  border-radius: 0.5rem;\n  opacity: 0.6;\n  color: ", ";\n  background: ", ";\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.hint;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette.light;
});
//# sourceMappingURL=index.js.map