import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React from 'react';
import styled from 'styled-components';
import { Images } from './Components/Images';
import { useOrder, useOrderPrice, Link, usePrice, useLocalLabels } from '@sentecacommerce-theme/lib';
import { Typography, Button as DetailsButton, ScrollView } from '../../../../../Common';
export var SingleItem = (_ref) => {
  var _trackingData$, _trackingData$2;

  var {
    order
  } = _ref;
  var {
    lineItems,
    status,
    orderRefNumber,
    createdAt,
    trackingData
  } = useOrder({
    data: order
  });
  var {
    discountedSubtotal,
    taxedPrice
  } = useOrderPrice(order);
  var labels = useLocalLabels();
  var {
    price
  } = usePrice({
    price: taxedPrice,
    discountedPrice: discountedSubtotal
  });
  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.createElement(OrderContainer, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Left, null, /*#__PURE__*/React.createElement(Title, null, labels.orderFrom, " ", day, "/", month, "/", date.getFullYear()), /*#__PURE__*/React.createElement(OrderNumber, null, trackUrl && /*#__PURE__*/React.createElement(Link, {
    href: trackUrl
  }, trackingData == null ? void 0 : (_trackingData$2 = trackingData[0]) == null ? void 0 : _trackingData$2.trackingId))), /*#__PURE__*/React.createElement(Price, null, price.displayValue)), /*#__PURE__*/React.createElement(OrderContent, null, /*#__PURE__*/React.createElement(OrderInfo, null, /*#__PURE__*/React.createElement(Created, null, labels.orderNum, " ", orderRefNumber), /*#__PURE__*/React.createElement(Row, {
    status: status
  }, /*#__PURE__*/React.createElement(DetailsButton, {
    variant: "light",
    disabled: true,
    small: true
  }, labels.status, ": ", status), /*#__PURE__*/React.createElement(DetailsButton, {
    bordered: true,
    small: true,
    link: "/order/" + order._id
  }, labels.viewDetails))), /*#__PURE__*/React.createElement(ProductImage, {
    mobile: false
  }, lineItems && (lineItems == null ? void 0 : lineItems.length) > 3 ? lineItems == null ? void 0 : lineItems.slice(0, 3).map((product, i) => {
    return /*#__PURE__*/React.createElement(Images, {
      key: "Image-" + product._id + "--" + i,
      product: product
    });
  }) : lineItems == null ? void 0 : lineItems.map((product, i) => {
    return /*#__PURE__*/React.createElement(Images, {
      key: "Image-" + product._id + "--" + i,
      product: product
    });
  }), lineItems && (lineItems == null ? void 0 : lineItems.length) > 3 && /*#__PURE__*/React.createElement(Link, {
    href: "/order/" + order._id
  }, /*#__PURE__*/React.createElement(MoreDetails, null, "+"))), /*#__PURE__*/React.createElement(ProductImage, {
    mobile: true
  }, /*#__PURE__*/React.createElement(ScrollView, {
    maxWidth: "85vw",
    overflowDirection: "x"
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-nowrap"
  }, lineItems == null ? void 0 : lineItems.map((product, i) => {
    return /*#__PURE__*/React.createElement(Images, {
      key: "Image-" + product._id + "--" + i,
      product: product
    });
  }))))));
};
var OrderContainer = styled.div.attrs({
  className: 'd-flex px-2 mb-5'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Header = styled.div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
});
var Left = styled.div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Price = styled(Typography).attrs({
  className: '',
  variant: 4
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    font-size: 1.5rem;\n    margin: 1rem 0 0 auto;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.max;
});
var Title = styled.div.attrs({
  className: 'px-2 my-auto'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  font-size: 2.3rem;\n  font-weight: 600;\n  @media (max-width: ", ") {\n    font-size: 2rem;\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.max;
});
var OrderNumber = styled.span.attrs({
  className: 'px-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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 = styled.div.attrs({
  className: 'd-flex p-2 my-1'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.max;
});
var OrderInfo = styled.div.attrs({
  className: 'd-flex justify-content-between py-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.md.max;
});
var Row = styled.div.attrs({
  className: ' mt-auto'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\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"])), props => props.status === 'Open' || props.status === 'Draft' ? '13rem' : '16rem', (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.breakpoints.md.max;
}, (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.breakpoints.md.max;
});
var DeliveryInfo = styled.div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  flex-direction: column;\n  align-items: start;\n  width: 100%;\n"])));
var Created = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  font-size: 1.5rem;\n"])));
var ProductImage = styled.div.attrs(props => {
  return {
    className: "align-items-center " + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  margin-left: ", ";\n  cursor: pointer;\n  display: ", ";\n  & picture {\n    width: 13rem;\n    padding-bottom: 150px !important;\n  }\n"])), props => props.mobile ? '' : 'auto', props => props.mobile ? 'none' : 'flex');
var MoreDetails = styled.div.attrs({
  className: 'd-flex justify-content-center align-items-center'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  height: 120px;\n  width: 100px;\n  font-size: 5rem;\n  border-radius: 0.5rem;\n  opacity: 0.6;\n  color: ", ";\n  background: ", ";\n"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.hint;
}, (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.palette.light;
});
//# sourceMappingURL=index.js.map