import React from 'react';
import { ButtonGroupPreview } from '@pisell/materials';
import { AmountDetails, CartItems, Client, Contact, OrderNote, SaleOverview } from "../../components";
import { useSaleDetailActions } from "../../hooks";
import "./index.less";
function SaleDetailTemplateAMain(_ref) {
  var _dataSource$sales$tem, _dataSource$sales$tem2;
  var dataSource = _ref.dataSource;
  return /*#__PURE__*/React.createElement("main", {
    className: "pisell-sale-detail-main"
  }, /*#__PURE__*/React.createElement(Client, {
    dataSource: dataSource.customer.selected
  }), (_dataSource$sales$tem = dataSource.sales.tempOrder) !== null && _dataSource$sales$tem !== void 0 && _dataSource$sales$tem.note ? /*#__PURE__*/React.createElement(OrderNote, {
    dataSource: dataSource.sales.tempOrder.note
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-scroll-content"
  }, /*#__PURE__*/React.createElement(Contact, {
    dataSource: (_dataSource$sales$tem2 = dataSource.sales.tempOrder) === null || _dataSource$sales$tem2 === void 0 ? void 0 : _dataSource$sales$tem2.contacts_info
  }), /*#__PURE__*/React.createElement(CartItems, {
    dataSource: dataSource.cart,
    sales: dataSource.sales
  })));
}
export function SaleDetailTemplateA(_ref2) {
  var dataSource = _ref2.dataSource;
  var actionButtonGroupList = useSaleDetailActions({
    dataSource: dataSource,
    actions: [{
      name: 'print-receipts',
      row: 1,
      order: 10
    }, {
      name: 'edit',
      row: 1,
      order: 20
    }, {
      name: 'cancel',
      row: 1,
      order: 30
    }, {
      name: 'checkout',
      row: 2,
      order: 40
    }]
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-tmpl-a"
  }, /*#__PURE__*/React.createElement(SaleOverview, {
    className: "pisell-sale-detail-tmpl-overview",
    dataSource: dataSource
  }), /*#__PURE__*/React.createElement("main", {
    className: "pisell-sale-detail-tmpl-body"
  }, /*#__PURE__*/React.createElement("section", {
    className: "pisell-sale-detail-tmpl-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-inline-layout"
  }, /*#__PURE__*/React.createElement(SaleDetailTemplateAMain, {
    dataSource: dataSource
  }), /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-footer"
  }, /*#__PURE__*/React.createElement(AmountDetails, {
    dataSource: {
      sales: dataSource.sales,
      summary: dataSource.summary
    }
  }), actionButtonGroupList.length ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-button-actions"
  }, /*#__PURE__*/React.createElement(ButtonGroupPreview, {
    buttonGroupList: actionButtonGroupList
  })) : null)))));
}