import * as React from "react";
import { get, head } from "lodash";
import ReactJson from "react-json-view";
import numeral from "numeral";

import { Table } from "..";

import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import {
  PluginProps,
  OrderSummaryProps,
  OrderSummaryTypes,
  OrderSummaryItemTypes,
} from "./types";

import { ComponentTypes } from "../types";

export const OrderSummary: React.FC<OrderSummaryProps> = ({
  cart = [],
  style = {},
  properties = {},
  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.value;
  }, 0);

  // Psuedocode for calculating values
  // All products added up
  // - Discounts ($)
  // - Discount (%)
  // - Promo Codes ($)
  // - Promo Codes (%)
  // + Shipping
  // + Sales Tax

  // const subTotal = cart.filter(itm => itm.itemType === OrderSummaryItemTypes.PRODUCT).reduce((acc, cv) => acc + (cv.value as number), 0)
  // const dollarBasedDiscounts = cart.filter(itm => itm.itemType === OrderSummaryItemTypes.DISCOUNT && (itm.value as string).indexOf('%') === -1).reduce((acc, cv) => acc + numeral(cv.value), 0)
  // const percentBasedDiscounts = get(head(cart.filter(itm => itm.itemType === OrderSummaryItemTypes.DISCOUNT && (itm.value as string).indexOf('%') > -1)), 'value', 1)
  // const shippingTotals = cart.filter(itm => itm.itemType === OrderSummaryItemTypes.SHIPPING).reduce((acc, cv) => acc + numeral(cv.value), 0)
  // const salesTax = get(head(cart.filter(itm => itm.itemType === OrderSummaryItemTypes.SALESTAX && (itm.value as string).indexOf('%') > -1)), 'value', 1)

  return (
    <div data-testid="WC-ORDERSUMMARY-LIVE" style={{ ...style, ...properties }}>
      {/* <ReactJson src={{ subTotal, dollarBasedDiscounts, percentBasedDiscounts, shippingTotals, salesTax }} /> */}
      <Table
        style={{ width: "100%", ...style }}
        fields={["Item", "Price"]}
        showHeader={showHeader}
        cellStyle={cellStyle}
        footerCellStyle={footerCellStyle}
        data={[
          ...(showCart
            ? cart.map((itm) => [
                itm.title,
                numeral(itm.value).format("$0,0.00"),
              ])
            : []),
          ...(showSubtotal
            ? [["Subtotal", numeral(total).format("$0,0.00")]]
            : []),
        ]}
        footer={[
          ...(showTotal
            ? [`Due Today:`, numeral(total).format("$0,0.00")]
            : []),
        ]}
      />
    </div>
  );
};

const OrderSummaryPlugin: React.FC<PluginProps> = ({ settings }) => {
  const properties = convertProperties(settings.properties);
  return (
    <V1ObjectWrapper settings={settings}>
      <OrderSummary {...settings} properties={properties} />
    </V1ObjectWrapper>
  );
};

export const onComponentRender = (hook, payload, actions) => {
  if (
    hook.id === "webcomponent" &&
    payload.type === ComponentTypes.ORDERSUMMARY
  ) {
    return [OrderSummaryPlugin];
  }
};

export default OrderSummary;