import React, { useEffect, useState } from "react";
import "./expensesTables.css"
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';
import defaultIcon from "../../../../assets/images/icon/default.png";
import {
  Check,
  ChevronLeft,ArrowDown,ArrowUp ,
  Building,Person,Plus
} from "react-bootstrap-icons";



import NodataImg from "../../../../assets/images/img/NodataImg.png";
import nodataBg from "../../../../assets/images/nodataBg.png";
import SearchIcon from "../../../../assets/images/icon/searchIcon.png";


import { Table } from "react-bootstrap";
import TableTopBar from "./TableTopBar";
import { Resizable } from 'react-resizable';
import StatusPopup from "./StatusPopup";


const ExpensesTables = ({ expensesData,rowsNo }) => {
  const [sortField, setSortField] = useState("Quote");
  const [sortDirection, setSortDirection] = useState("asc");
  const [selectedRow, setSelectedRow] = useState(null);

  // Formate Date
  const formatDate = (timestamp) => {
    const date = new Date(timestamp * 1000);
    const day = date.getDate();
    const monthAbbreviation = new Intl.DateTimeFormat("en-US", {
      month: "short",
    }).format(date);
    const year = date.getFullYear();
    return `${day} ${monthAbbreviation} ${year}`;
  };

  const toggleSort = (field) => {
    setSortField(field);
    setSortDirection((prevDirection) =>
      prevDirection === "asc" ? "desc" : "asc"
    );
  };

  const sortedClientsData = [...expensesData].sort((a, b) => {
    const aValue = a[sortField];
    const bValue = b[sortField];
  
    
    if (aValue === undefined || bValue === undefined) {
      return 0; 
    }
  
    if (sortDirection === "asc") {
      return aValue.localeCompare(bValue, undefined, { numeric: true });
    } else {
      return bValue.localeCompare(aValue, undefined, { numeric: true });
    }
  });

  const [show, setShow] = useState(false);

  const handleRowClick = (rowId) => {
    setSelectedRow(rowId === selectedRow ? null : rowId);
    setShow(true)
  };

 

    const handleClose = () => setShow(false);


  const [selectedRows, setSelectedRows] = useState([]);
  const handleSelectAllCheckboxChange = () => {
    const allRowIds = expensesData.map((sale) => sale.id);
    if (selectedRows.length === allRowIds.length) {
      setSelectedRows([]);
    } else {
      setSelectedRows(allRowIds);
    }
  };

  const selectedRowsCount = selectedRows.length;

  const [columns, setColumns] = useState([
    {
      field: "Quote",
      headerName: (
        <div className="styleColor1" onClick={() => toggleSort("Quote")}>
        <span>Expense ID</span>
        {sortField === "Quote" && (
          <span>
            {sortDirection === "asc" ? (
              <ArrowUp size={16} color="#475467" />
            ) : (
              <ArrowDown size={16} color="#475467" />
            )}
          </span>
        )}
      </div>
      ),
 
      renderCell: (params) => (
        <div className="styleColor1">
          <strong>{params.value}</strong>
          <p>{params.row.created}</p>
        
        </div>
      ),
    },

    {
      field: "supplier",
      headerName: (
        <div className="styleColor1" onClick={() => toggleSort("supplier")}>
        <span>Supplier</span>
        {sortField === "supplier" && (
          <span>
            {sortDirection === "asc" ? (
              <ArrowUp size={16} color="#475467" />
            ) : (
              <ArrowDown size={16} color="#475467" />
            )}
          </span>
        )}
      </div>
      ),
  
      renderCell: (params) => (
        <div className="userImgStyle1">
          <div className="innerFlex styleColor2 d-flex justify-content-between">
            <div className="leftStyle spaceBorder d-flex align-items-center isbusinessIcon">
              {params.row.photo ? (
                <img
                  src={params.row.photo}
                  alt={params.row.photo}
                  style={{ marginRight: "5px" }}
                  onError={(e) => {
                    e.target.src = defaultIcon;
                    e.target.alt = "Image Not Found";
                  }}
                />
              ) : (
                params.row.isbusiness ? (
                  <div className="iconBuilding icon">
                    <Building size={13.71} color="#667085" />
                  </div>
                ) : (
                  <div className="iconPerson icon">
                    <Person size={24} color="#667085" />
                  </div>
                )
              )}
              <span>{params.value}</span>
            </div>
            <Button className="linkByttonStyle" variant="link">Open</Button>
          </div>
        </div>
      ),
      
    },
  
    {
      field: "reference",
      sortable: false,
      headerName: "Reference",
      width: 440,
      renderCell: (params) => {
    
        return (
          <div
            className="mainStyle "
            style={{ whiteSpace: "normal", textAlign: "left" }}
          >
           {params.value}
          </div>
        );
      },
    },
    {
      field: "duedate",
      sortable: false,
      headerName: "Due Date",
      width: 120,
      renderCell: (params) => {

        return (
          <div
            className="mainStyle duedate"
            style={{ whiteSpace: "normal", textAlign: "left" }}
          >
            {formatDate(params.value)}
          </div>
        );
      },
    },
    
  
    {
      field: "total",
      sortable: false,
      headerName: "Total",
      width: 131,
      renderCell: (params) => (
          <div
            className="totalpayEx"
            style={{ whiteSpace: "normal", textAlign: "center" }}
          >
         $ {params.value}<span className="lineVerticle"><Plus size={12} color="#079455" /></span>
        </div>
      ),
    },
  
    {
      field: "UserInvoice",
      sortable: false,
      headerName: "Interval/Order",
      width: 144,
      renderCell: (params) => (
        params.value ? (
          <div
            className="intervalorder"
            style={{ whiteSpace: "normal", textAlign: "center" }}
          >
            {params.value}
          </div>
        ) : (
          <span></span>
        )
      ),
      
    },
   
    {
      field: "accountCode",
      sortable: false,
      headerName: "Account Code",
      width: 214,
      renderCell: (params) => (
        params.value ? (
          <div
            className="styleColor1 accountCode"
            style={{ whiteSpace: "normal", textAlign: "left" }}
          >
            {params.value}: {params.row.accountname}
          </div>
        ) : (
          <span></span>
        )
      ),
    },

    {
      field: "country",
      sortable: false,
      headerName: "Xero/Myob",
      width: 111,
      renderCell: (params) => (
        <div
          className="styleGrey01"
          style={{ whiteSpace: "normal", textAlign: "left", textTransform: "uppercase" }}
        >
          
        </div>
      ),
    },

    {
      field: "department",
      sortable: false,
      headerName: "Departments",
      width: 128,
      renderCell: (params) => (
        <div
        className="styleGrey01 departmentstyle"
        style={{ whiteSpace: "normal", textAlign: "left" }}
      >
        {params.value}
        
        </div>
      ),
    },
    {
      field: "paid",
      sortable: false,
      headerName: "Status",
      width: 120,
      renderCell: (params) => (
          <StatusPopup statusValue={params.value} />
      ),
    }
  ]);

  const [rows, setRows] = useState([]);
  useEffect(()=> {
    const rows = expensesData.map((expense) => {

    
      return {
        isSelected: selectedRows.includes(expense.id),
        id: expense.id,
        Quote: expense.number,
        created: expense.created,
        paid: expense.paid,
        supplier: expense.supplier ? expense.supplier.name : null,
        photo: expense.supplier ? expense.supplier.photo : null,
        reference: expense.invoice_reference,
        duedate: expense.created,
        total: expense.total,
        UserInvoice: expense.type,
        accountCode: expense.account_code ? expense.account_code.code : null,
        accountname: expense.account_code ? expense.account_code.name : null,
        department: expense.department ? expense.department.name : null,
      
      };
    });
    
    setRows(rows)
  }, [expensesData,selectedRows])
  

  const onResize = (index) => (event, { size }) => {
    setColumns((prevColumns) => {
      const nextColumns = [...prevColumns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      return nextColumns;
    });
  };
  
  const handleCheckboxChange = (rowId) => {
    const updatedSelectedRows = [...selectedRows];
    if (updatedSelectedRows.includes(rowId)) {
      // Row is already selected, remove it
      updatedSelectedRows.splice(updatedSelectedRows.indexOf(rowId), 1);
    } else {
      // Row is not selected, add it
      updatedSelectedRows.push(rowId);
    }
    setSelectedRows(updatedSelectedRows);
  };
  const isSelected = selectedRows.length > 0;
  const [rowsfilter, setRowsFilter] = useState([]);
  
  const handleRowsFilterChange = (filteredRows) => {
    
    const rows = filteredRows.map((expense) => {
      return {
        isSelected: selectedRows.includes(expense.id),
        id: expense.id,
        Quote: expense.number,
        created: expense.created,
        supplier: expense.supplier ? expense.supplier.name : null,
        photo: expense.supplier ? expense.supplier.photo : null,
        reference: expense.invoice_reference,
        duedate: expense.created,
        total: expense.total,
        UserInvoice: expense.type,
        accountCode: expense.account_code ? expense.account_code.code : null,
        accountname: expense.account_code ? expense.account_code.name : null,
        department: expense.department ? expense.department.name : null,
      };
    });
    
    setRows(rows);
    setRowsFilter(rows);
  };

  return (
    <div className="expensesTableWrap">
      <TableTopBar expensesData={expensesData} rowsfilter={rowsfilter} onRowsFilterChange={handleRowsFilterChange} rows={sortedClientsData} selectedRow={selectedRows} selectClass={isSelected ? "selected-row" : ""} selectedRowCount={selectedRowsCount} />

      <Table responsive>
      <thead style={{ position: "sticky", top: "0px", zIndex: 9 }}>
          <tr>
          <th>
          <label className="customCheckBox">
          <input
            type="checkbox"
            checked={selectedRows.length === expensesData.length}
            onChange={handleSelectAllCheckboxChange}
          />
          <span className="checkmark">
            <Check color="#9E77ED" size={20} />
          </span>
        </label>
          </th>
            {columns.map((column, index) => (
                <th key={column.field} style={{ width: column.width }}>
                <Resizable
                  width={column.width || 100} // Provide a default width if undefined
                  height={0}
                  onResize={onResize(index)}
                >
                  <div>
                    {column.headerName}
                  </div> 
                </Resizable>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 ? (
            <tr className="nodataTableRow">
              <td colSpan={columns.length} style={{ textAlign: "center" }}>
                <div style={{ textAlign: "center", marginTop: "20px" }}>
                  <div
                    className="Nodata"
                    style={{ background: `url(${nodataBg})` }}
                  >
                    <div className="image">
                      <img src={NodataImg} alt="NodataImg" />
                      <img
                        className="SearchIcon"
                        src={SearchIcon}
                        alt="SearchIcon"
                      />
                    </div>
                    <h2>There is no results</h2>
                    <p>
                      The user you are looking for doesn't exist. Here are some
                      helpful links:
                    </p>
                    <Button className="gobackButton mb-4 mt-4" variant="link">
                      {" "}
                      <ChevronLeft color="#000" size={20} />
                      Go back
                    </Button>
                    <Button className="gobackSupport mt-4" variant="link">
                      {" "}
                      Support
                    </Button>
                  </div>
                </div>
              </td>
            </tr>
          ) : (
        
            rows.map((row,index) => (
              <tr data-clientuniqueid={row.clientUniqueId} rowsNo={index}
                key={row.id} className={row.isSelected ? "selected-row" : ""}
                >
                  <td>
                  <label className="customCheckBox">
                  <input
                    type="checkbox"
                    checked={selectedRows.includes(row.id)}
                    onChange={() => handleCheckboxChange(row.id)}
                  />
                  <span className="checkmark">
                    <Check color="#9E77ED" size={20} />
                  </span>
                </label>
                  </td>
                {columns.map((column) => (
                    <td key={column.field} onClick={["Quote", "Client", "category"].includes(column.field) ? () => handleRowClick(row.id) : null}>
                    {column.renderCell({ value: row[column.field], row })}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>
      </Table>
   
        {/* Sidebar */}
        {selectedRow && (
       <Offcanvas show={show} placement="end" onHide={handleClose}>
       <Offcanvas.Header closeButton>
         <Offcanvas.Title><strong>{selectedRow}.</strong> Client Edit Data Head</Offcanvas.Title>
       </Offcanvas.Header>
       <Offcanvas.Body>
        
       </Offcanvas.Body>
     </Offcanvas>
     
      )}
    </div>
  );
};




export default ExpensesTables