import React, { Component } from "react";
import PropTypes from "prop-types";
import { MdDelete } from "react-icons/md";
import { FaBoxOpen } from "react-icons/fa";
import { API_TOKEN, CONNECTION_URL, MODE_IDLE } from "../../constants";
import { FaRegWindowClose } from "react-icons/fa";
import { fromJS } from "immutable";
// import _ from 'lodash';
import { typeOf } from "mathjs";
import { CSVLink, CSVDownload } from "react-csv";
import { getComponentDetails, getWriteInProductDetails } from "./bom-report";
import { toFixedFloat } from "../../utils/math";
import { getDrawingExpiryDate } from "../../api/api";

const quoteId = document.getElementById("quoteId")
  ? document.getElementById("quoteId").value
  : 22;
const drawingId = document.getElementById("drawingId")
  ? document.getElementById("drawingId").value
  : 22;
//const drawingId = 333;
export default class Report extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      gridData: null,
      totalprice: null,
      cutPanel:null,
      writin: null,
      csv2Qty: null,
      csv4Qty:null,
    };
    this.getBomDetails = this.getBomDetails.bind(this);
  }
  componentDidMount() {
    let { state } = this.props;
    var layers = state.scene.layers;
    let { scene } = state;
    let { catalog } = this.context;
    getDrawingExpiryDate(quoteId, state.get("drawingId")).then((response) => {
      if (
        response.data.quote_status === 1 ||
        response.data.quote_status === 2
      ) {
        this.getBomDetails();
      } else {
        if (response.data.published === false) {
          this.getBomDetails();
        } else if (response.data.published === true) {
          this.getBomDetails();
          let expired =
            new Date(response.data.expiry_date).getTime() <
            new Date().getTime();
          if (expired) {
            this.getBomDetails();
          } else if (!expired) {
            if (response.data.status === 4) {
              this.getBomDetails();
            } else {
              this.setState({
                gridData:
                  state.getIn(["scene", "priceDetails"]).productDetails
                    .gridData || [],
                totalprice:
                  state.getIn(["scene", "priceDetails"]).productDetails
                    .totalprice || 0,
                writin:
                  state.getIn(["scene", "priceDetails"])
                    .writeInProductDetails || [],
              });
            }
          }
        }
      }
    });
  }
  getBomDetails() {
    getComponentDetails(this.props.state, this.context.catalog).then(
      (result) => {
        let twoqty1=0;
        let fourqty1=0;
        let cutPanel = result.gridData && result.gridData.filter(item => (item.partno.slice(-2) === '-X' ))
        let twoInchextraPan = result.gridData && result.gridData.filter(item => (item.partno.slice(-2) === '-X' && item.partno.charAt(8)== '2'))
        let fourInchextraPan = result.gridData && result.gridData.filter(item => (item.partno.slice(-2) === '-X' && item.partno.charAt(8)== '4'))
        for(const cutPanel of twoInchextraPan){
          twoqty1 += cutPanel.quantity;
          // console.log("qty1",qty1);
        }
        for(const fourcutPanel of fourInchextraPan){
          fourqty1 += fourcutPanel.quantity;
          // console.log("qty1",qty1);
        }

        // console.log("twoInchextraPan",fourqty1,twoqty1);
        if (result) {
          this.setState({
            gridData: result.gridData,
            totalprice: toFixedFloat(result.totalPrice, 2) || 0,
            csv2Qty: twoqty1,
            csv4Qty:fourqty1,
            cutPanel: cutPanel,
          });
        }
      }
    );
    // getWriteInProductDetails(this.props.state).then((result) => {
    //   if (result) {
    //     this.setState({
    //       writin: result,
    //     });
    //   }
    // });
  }

  render() {
    // let csvData = this.state.gridData.filter(temp=> temp.)
    var newData = [];
    let varCsvData =
      this.state.gridData &&
      this.state.gridData
        .filter((x) => x.partno && x.partno!="ASPACKAGING")
        .map((eachItem) => {
          let csvItem = {};
          if (typeof eachItem.info === "undefined" || !eachItem.info) {
            eachItem.info = "";
          }
          if (eachItem.variantColor==="CL") {
            eachItem.variantColor = "";
          }
          if (typeof eachItem.panelLabel === "undefined") {
            eachItem.panelLabel = "";
          }
          if (typeof eachItem.partno === "undefined") {
            eachItem.partno = "";
          }
          if (typeof eachItem.quantity === "undefined") {
            eachItem.quantity = "";
          }
          // if (eachItem.partno && (eachItem.partno).includes('HP1')) {
          //   eachItem.partno = (eachItem.partno).replace('HP1', 'HP');
          // }
          // if (eachItem.partno && (eachItem.partno).includes('X1')) {
          //   eachItem.partno = (eachItem.partno).replace('X1', 'X');
          // }
          // let fr = eachItem.partno !=="ASPACKAGING"; 
          // console.log("eachItem",fr,eachItem.partno);
          if (eachItem.partno != "") {
            csvItem.PartNumber = eachItem.partno;
            csvItem.Variant2Code = eachItem.variantColor;
            csvItem.Quantity = eachItem.quantity;
            csvItem.Cut = eachItem.cut? true: false;
            csvItem.Info = ` ${eachItem.info} `;
            if (csvItem.Info === " null ") {
              csvItem.Info = "";
            }
            csvItem.Position = eachItem.panelLabel;
            csvItem.Description1 =
              eachItem.productnumber != undefined
                ? eachItem.productnumber + " "
                : "";
            csvItem.Description2 =
              eachItem.description1 != undefined
                ? eachItem.description1 + " "
                : "";
          }

            return csvItem;
        });
        // console.log("csvItem",varCsvData);
        // let mycsvData =[];
       let redoneMycsvData= [];
       let mergedArray = [];
       let twoInchQty = this.state.csv2Qty;
       let fourInchQty = this.state.csv4Qty;
       
       if (varCsvData) {
      newData = varCsvData.filter(data => data.Cut == false);
      var totalTwoCutPanel = new Object();
      var totalFourPanel = new Object();
      let filtered2 = varCsvData.filter(e => e.PartNumber.endsWith('-X') && e.PartNumber.charAt(8)=== '2');
      let filtered4 = varCsvData.filter(e => e.PartNumber.endsWith('-X') && e.PartNumber.charAt(8)=== '4');
      // console.log("filtered2",.length);
      if(filtered2.length > 0){
        totalTwoCutPanel.PartNumber = filtered2[0].PartNumber;
        totalTwoCutPanel.Quantity = twoInchQty;
        newData.push(totalTwoCutPanel);
      }
      if(filtered4.length > 0){
        totalFourPanel.PartNumber = filtered4[0].PartNumber;
        totalFourPanel.Quantity = fourInchQty;
        newData.push(totalFourPanel);
      }
    //  mycsvData = newData && newData.reduce((acc, curr) => {
    //   let fourItem = acc.find(item => item.PartNumber.slice(-2) === '-X');
    //   if (fourItem) {
    
    //     fourItem.Quantity = this.state.csv4Qty;
    //     // sum = sum + item.quantity;
    //   } else {
    //     acc.push(curr);
    //   }
      
      // ASWP48962XXG01G01-X
    
    //   return acc;
    // }, []);
    // redoneMycsvData = mycsvData && mycsvData.reduce((acc, curr) => {
    //   let twoItem = acc.find(item => item.PartNumber.charAt(8)=== '2' && item.PartNumber.slice(-2) === '-X');
    //   console.log("twoItem",twoItem);
    //   if (twoItem) {
        
    //     twoItem.Quantity = this.state.csv2Qty;
    //     // sum = sum + item.quantity;
    //   } else {
    //     acc.push(curr);
    //   }
      
    //   // ASWP48962XXG01G01-X
      
    //   return acc;
    // }, []);
    // console.log("newData",newData,mycsvData,redoneMycsvData);
    
      // console.log("varCsvData");
      // varCsvData = varCsvData.sort(function (a, b) {
      //   if (a.PartNumber < b.PartNumber) { return -1; }
      //   if (a.PartNumber > b.PartNumber) { return 1; }
      //   return 0;
      // })
      
      
      // for (const obj of newData) {
      //   var totalCutPanel = new Object();
      //   totalCutPanel = obj;
      //   const partNumber = totalCutPanel.PartNumber;
      //   const ninthChar = partNumber.charAt(8);
      
      //   if ((ninthChar === '2'||ninthChar === '4') && partNumber.endsWith('-X')) {
      //     // Check if the PartNumber satisfies the conditions
      
      //     // Find if the PartNumber already exists in the mergedArray
      //     const existingObj = mergedArray.find((item) => item.PartNumber === partNumber);
      
      //     if (existingObj) {
      //       // If the PartNumber already exists, update the Quantity
      //       existingObj.Quantity += totalCutPanel.Quantity;
      //     } else {
      //       // If the PartNumber doesn't exist, add the object to mergedArray
      //       mergedArray.push(totalCutPanel);
      //     }
      //   } else {
      //     // Add objects that don't meet the conditions directly to mergedArray
      //     mergedArray.push(totalCutPanel);
      //   }
      // }
      // console.log("varCsvData",varCsvData,newData,totalTwoCutPanel,totalFourPanel);
      
      
    }
    let headers = [
      { label: "PartNumber", key: "PartNumber" },
      { label: "Variant 2 Code", key: "Variant2Code" },
      { label: "Quantity", key: "Quantity" },
      { label: "Info", key: "Info" },
      { label: "Position", key: "Position" },
      { label: "Description 1", key: "Description1" },
      { label: "Description 2", key: "Description2" },
    ];
    let headers2 = [
      { label: "Product Number", key: "PartNumber" },
      { label: "Variant 2 Code", key: "Variant2Code" },
      { label: "Sales Description", key: "description" },
      { label: "Quantity", key: "Quantity" },
    ];
    let headers3 = [
      { label: "Part number", key: "PartNumber" },
      { label: "Qty", key: "Quantity" },
      { label: "Variant", key: "Variant2Code" },
    ];
    let { state } = this.props;
    let totalPrice = this.state.totalprice;
    let quantitiy = null;
    let { projectActions } = this.context;
    var layers = state.scene.layers;
    let { scene } = state;
    let { catalog } = this.context;
    // let cat = '' ;
    // cat=_.map(layers,'holes');
    let componentArray = [];
    let componentsPartnumbers = {};
    // this.state.gridData && this.state.gridData.sort(function (a, b) {
    //   if (a.partno < b.partno) { return -1; }
    //   if (a.partno > b.partno) { return 1; }
    //   return 0;
    // })
    return (
      <div className="container-fluid dummy">
        <section className="main">
          <div className="row">
            <div className="col d-flex justify-content-between align-items-right alignItemsCenterx">
              <div className="BreadCremb">
                <h2>Report</h2>
                {/* {this.csvConvert()} */}
              </div>
              <div className="headercsv csv_headerWrap">
                {varCsvData && (
                  <CSVLink
                    className="cta-export QMC_bttnZ"
                    data={varCsvData}
                    headers={headers}
                    filename={"iDesigner-BOM-Report.csv"}
                  >
                    BOM csv
                  </CSVLink>
                )}
                {varCsvData && (
                  <CSVLink
                    className="cta-export QMC_bttnZ"
                    data={varCsvData}
                    headers={headers2}
                    filename={"iDesigner-BOM-Report2.csv"}
                  >
                    Quote csv
                  </CSVLink>
                )}
                {varCsvData && (
                  <CSVLink
                    className="cta-export QMC_bttn"
                    data={newData}
                    headers={headers3}
                    filename={"iDesigner-BOM-Report3.csv"}
                  >
                    Quote Manager csv
                  </CSVLink>
                )}

                <div className="close-svg">
                  <FaRegWindowClose
                    className="stepByStepClose"
                    y="-32.534154"
                    x="99%"
                    onClick={() => {
                      projectActions.setMode(MODE_IDLE);
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        </section>
        <div className="QuoteList">
          <table className="table table-hover table-bordered  ">
            <thead className="thead-light">
              <tr>
                <th scope="col">Panel Label</th>
                <th scope="col">Part Number</th>
                <th scope="col">Variant 2 Code</th>
                <th scope="col">Info</th>
                <th scope="col">Quantity</th>
                <th scope="col">Unit Price</th>
                <th scope="col">Total Price</th>
                <th scope="col">Description 1</th>
                <th scope="col">Description 2</th>
                <th scope="col">Sales Description </th>
              </tr>
            </thead>
            <tbody>
              {this.state.gridData &&
                this.state.gridData.map((data, i) => {
                  // let result = this.getComponentDetails(key,(result)=>{
                  //   price_base = result.price_base;
                  // });
                  let price = data.price ? data.price : 0;
                  let qty = data.quantity ? data.quantity : 0;
                  // if (data.variantColor === "undefined" && eachItem.variantColor ==="CL") {
                  //   data.variantColor = "";
                  // }
                  // if (data.partno && (data.partno).includes('X1')) {
                  //   data.partno = (data.partno).replace('X1', 'X');
                  // }
                  // console.log("DATA BOM", data.variantColor);
                  // totalPrice += price;
                  // quantitiy = (data.quantity).toFixed(0)
                  return (
                    <tr>
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.panelLabel}</td>}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.partno}</td>}
                      {(typeof data.partno !== "undefined" && data.partno!=="" && data.variantColor!=="CL")?
                      <td>{data.variantColor}</td>: <td>{ }</td>}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.info}</td>}
                      {typeof data.partno !== "undefined" &&
                        typeof qty === "number" &&
                        data.partno !== "" && <td>{qty}</td>}
                      {typeof data.partno !== "undefined" &&
                        typeof qty !== "number" &&
                        data.partno !== "" && <td>{qty}</td>}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.price_base}</td>}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && (
                          <td>{price.toFixed(2)}</td>
                        )}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.productnumber}</td>}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.description1}</td>}
                      {typeof data.partno !== "undefined" &&
                        data.partno !== "" && <td>{data.description}</td>}
                    </tr>
                  );
                })}
                {totalPrice &&(
                  <tr>
                <td colSpan="6">Total Price</td>
                <td> {totalPrice.toFixed(2)}</td>
                <td></td>
                <td></td>
              </tr>
                )}
            </tbody>
          </table>
          {/* <div className="writinList">
            <div className="BreadCremb">
              <h5>Writin Products</h5>
            </div>
            <table className="table table-hover table-bordered  ">
              <thead className="thead-light">
                <tr>
                  <th scope="col">Part Number</th>
                  <th scope="col">Info</th>
                  <th scope="col">Quantity</th>
                  <th scope="col">Unit Price</th>
                  <th scope="col">Total Price</th>
                  <th scope="col">Description 1</th>
                  <th scope="col">Description 2</th>
                </tr>
              </thead>
              <tbody>
                {this.state.writin && this.state.writin.length ? (
                  this.state.writin.map((data, i) => {
                    let price = data.price ? data.price : 0;
                    let qty = data.quantity ? data.quantity : 0;
                    totalPrice += price;
                    return (
                      <tr>
                        {data.part_no !== "" && <td>{data.part_no}</td>}
                        {data.info !== "" && <td>{data.info}</td>}
                        {data.part_no !== "" && <td>{qty}</td>}
                        {data.price !== "" && <td>{data.price}</td>}
                        {data.price !== "" && (
                          <td>{(price * qty).toFixed(2)}</td>
                        )}
                        {data.description1 !== "" && (
                          <td>{data.description1}</td>
                        )}
                        {data.description2 !== "" && (
                          <td>{data.description2}</td>
                        )}
                      </tr>
                    );
                  })
                ) : (
                  <tr>
                    <td colSpan="7">No data found</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div> */}
        </div>
      </div>
    );
  }
}
Report.propTypes = {
  state: PropTypes.object.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  style: PropTypes.object,
};
Report.contextTypes = {
  catalog: PropTypes.object.isRequired,
  projectActions: PropTypes.object.isRequired,
};