/*
 * OpenBills - Self hosted browser app to generate and keep track of simple invoices
 * Version - 0
 * Licensed under the MIT license - https://opensource.org/licenses/MIT
 *
 * Copyright (c) 2021 Vidhu Kant Sharma
*/

import React from "react";
import { Item } from "./../../interfaces"
import "./Display.scss";

interface props {
  items: Item[]
}

interface FullSummary {
  TotalRawPrice: number // total price without gst/discount
  TotalDiscount: number // total amount of discount
  TotalGST: number // total gst to be paid
  TotalPriceAfterDiscount: number
  TotalPriceAfterGST: number
  TotalRoundedOff: number
}

const getFullSummary = (items: Item[]): FullSummary => {
  var rawPrice: number = 0;
  var totalDiscount: number = 0;
  var totalGST: number = 0;

  for (let i in items) {
    const item = items[i];
    rawPrice += item.TotalValue;
    totalDiscount += item.DiscountValue;
    totalGST += item.TotalGSTValue;
  }

  const totalPriceAfterDiscount: number = rawPrice - totalDiscount;
  const totalPriceAfterGST: number = totalPriceAfterDiscount + totalGST;
  const totalRoundedOff: number = parseFloat(Math.abs(
    (totalPriceAfterGST) - Math.round(totalPriceAfterGST)
  ).toFixed(2)); // rounded off value in 0.00 format

  return {
    TotalRawPrice:           rawPrice,
    TotalDiscount:           totalDiscount,
    TotalGST:                totalGST,
    TotalPriceAfterDiscount: totalPriceAfterDiscount,
    TotalPriceAfterGST:      totalPriceAfterGST,
    TotalRoundedOff:         totalRoundedOff
  }
}

// export const SummaryDisplayTR: React.FC<props> = (props) => {
//   const summary = getBasicSummary(props.items);
// 
//   return (
//     <tr className={"SummaryDisplayTR"}>
//       <td>Total</td>
//       <td className={"disabledBorder"}></td>
//       <td className={"disabledBorder"}></td>
//       <td>{summary.TotalQuantity}</td>
//       <td className={"disabledBorder"}></td>
//       <td className={"disabledBorder"}></td>
//       <td className={"disabledBorder"}></td>
//       <td className={"disabledBorder"}></td>
//       <td className={"disabledBorder"}></td>
//       <td>{summary.TotalRawPrice}</td>
//     </tr>
//   );
// }

const SummaryDisplay: React.FC<props> = (props) => {
  const summary: FullSummary = getFullSummary(props.items);
  return (
    <div className={"SummaryDisplay"}>
      <h1>Summary</h1>
      <table>
        <tbody>
          <tr>
            <td>Base Total</td>
            <td>{summary.TotalRawPrice}</td>
          </tr>

          {summary.TotalDiscount !== 0.00 &&
            <tr>
              <td>After Discount</td>
              <td>{summary.TotalPriceAfterDiscount}</td>
              <td>(-{summary.TotalDiscount})</td>
            </tr>
          } 

          <tr>
            <td>After Tax</td>
            <td>{summary.TotalRawPrice + summary.TotalGST}</td>
            <td>(+{summary.TotalGST})</td>
          </tr>

          {summary.TotalRoundedOff !== 0.00 &&
            <tr> 
              <td>Rounded Off</td> 
              <td>{summary.TotalRoundedOff}</td> 
            </tr>
          }

          <tr className={"grandTotal"}>
            <td>Grand Total</td> 
            <td>{summary.TotalRawPrice + (summary.TotalGST - summary.TotalDiscount)}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default SummaryDisplay;