import * as React from "react";
import numeral from "numeral";
import { Headline, Table } from "..";
import { EditorMode } from "@sc/modules/v2/Editor/types";

export enum OrderSummaryTypes {
  STANDARD,
}

interface OrderSummaryProps {
  mode?: EditorMode;
  cart: any;
  showHeader?: Boolean;
  showCart?: Boolean;
  showSubtotal?: Boolean;
  showTotal?: Boolean;
  style?: any;
  cellStyle?: any;
  footerCellStyle?: any;
  type: OrderSummaryTypes;
}

export const OrderSummary: React.FC<OrderSummaryProps> = ({
  cart = [],
  style,
  cellStyle,
  footerCellStyle,
  type = OrderSummaryTypes.STANDARD,
  showHeader = true,
  showCart = true,
  showSubtotal = true,
  showTotal = true,
}) => {
  const total = cart.reduce((acc, cv) => {
    console.log({ acc, cv });
    return acc + cv.price;
  }, 0);
  return (
    <div data-testid="WC-ORDERSUMMARY-LIVE">
      <Table
        style={{ width: "100%", ...style }}
        fields={["Item", "Price"]}
        showHeader={showHeader}
        cellStyle={cellStyle}
        footerCellStyle={footerCellStyle}
        data={[
          ...(showCart
            ? cart.map((itm) => [
                itm.title,
                numeral(itm.price).format("$0,0.00"),
              ])
            : []),
          ...(showSubtotal
            ? [["Subtotal", numeral(total).format("$0,0.00")]]
            : []),
        ]}
        footer={[
          ...(showTotal
            ? [`Due Today:`, numeral(total).format("$0,0.00")]
            : []),
        ]}
      />
    </div>
  );
};

export default OrderSummary;