import React, { useEffect, useState } from "react";
import * as ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../css/logs.css";
import "react-data-table-component-extensions/dist/index.css";
import { process, filterBy  } from '@progress/kendo-data-query';
import { 
  Grid, 
  GridColumn ,
  GridDetailRowProps,
  GridExpandChangeEvent 
} from '@progress/kendo-react-grid';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Skeleton } from "@progress/kendo-react-indicators";
import { DropdownFilterCell } from "./DropdownFilterCell";
import { useLocation } from "react-router-dom";
import logo from "../assets/icons/Shamir_50Years&Shamir White Trnsprnt.svg";
//import "../css/kendo-theme-custom.scss";

const DetailComponent = (props) => {
  const dataDesc = props.dataItem.description;

  if(dataDesc){
    return (
      <section>
          <div style={{fontFamily: "ploni-demibold"}}>
            <u>Log Description</u>
          </div>
          <div style={{whiteSpace: "pre-wrap", overflowY: "scroll",height:300}} dangerouslySetInnerHTML={{__html: dataDesc}} />
      </section>
    );
  }

  return (
    <div
      style={{
        height: "50px",
        width: "100%",
      }}
    >
      <div
        style={{
          position: "absolute",
          width: "100%",
        }}
      >
        <div className="k-loading-image" />
      </div>
    </div>
  );


};


  
const Logs = (props) => {
    const requestInProgress = React.useRef(false);
    const location = useLocation();
    const pageSize = 60;
    const total = 10000;
    const rowClass = 'my-green-class';
    const baseUrl = `https://localhost:44365/Logs/GetLogs`;

    const [logs, setLogs] = React.useState([]);
    const [page, setPage] = React.useState({
      skip: 0,
      take: pageSize,
    });
    const [subType,setsubType] =  React.useState([]);
    const [data1,setdata1] =  React.useState([]);
    const [companyName,setCompanyNames] =  React.useState([]);
    const [newdata,setIfNewData] = React.useState("");
    const [logShow,setLogShow] = React.useState("");
    const [filter, setFilter] = React.useState();
    const [objfilters,setObjFilters] = React.useState({"action":"2","subType":null,"name":null,"data1":null});
    const [RefreshData,setRefreshData] = React.useState(false);
    const CategoryFilterCell = (props) => (
      <DropdownFilterCell
        {...props}
        data={['true','false']}
        defaultItem={""}
      />
    );

    const CategoryFilterCellSubType = (props) => (
      <DropdownFilterCell
        {...props}
        data={subType}
        defaultItem={""}
      />
    );

    const CategoryFilterCellCompany = (props) => (
      <DropdownFilterCell
        {...props}
        data={companyName}
        defaultItem={""}
      />
    );

    const CategoryFilterCellData1 = (props) => (
      <DropdownFilterCell
        {...props}
        data={data1}
        defaultItem={""}
      />
    );

    const filterChange = (event) => {
      var filtersArray = event.filter.filters;
      var initialObj = {"action":"2","subType":null,"name":null,"data1":null};
      for(var i=0;i<filtersArray.length;i++){
        var field_name = filtersArray[i].field;
        if(field_name  == "action" ) { 
          if(filtersArray[i].value == 'true' ){
            initialObj[field_name] = "0";
          } else if(filtersArray[i].value == 'false' ) {
            initialObj[field_name] = "1";
          } else {
            initialObj[field_name] = "2";
          }
        } else {
            initialObj[field_name] = filtersArray[i].value;
        }
      }
      setObjFilters(initialObj);

      setRefreshData(true);
      setFilter(event.filter);

      };

    const requestIfNeeded = (skip) => {
      for (let i = skip; i < skip + pageSize && i < logs.length; i++) {
        if (logs[i].id === undefined) {
          requestData(skip);

          return;
        }
      }
    };
  
    const requestData = (skipParameter) => {
      if (requestInProgress.current) {
        return;
      }
      requestInProgress.current = true;
      const skip = Math.max(skipParameter - pageSize, 0); // request the prev page as well

      const GetSubType = async () => {
        const response = await fetch("https://localhost:44365/Logs/GetSubTypes?id_user= " + location.state.id_us  , {
          method: "POST",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        });
        const data = await response.json();
        var arr = data.map(function(obj) {
          return obj.subType
        });
        setsubType(arr);
      }

      
      const GetData1 = async () => {
        const response = await fetch("https://localhost:44365/Logs/GetData1?id_user= " + location.state.id_us  , {
          method: "POST",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        });
        const data = await response.json();
        var arr = data.map(function(obj) {
          return obj.data1
        });
        setdata1(arr);
      }

      const GetCompanyNames = async () => {
        const response = await fetch("https://localhost:44365/Logs/GetCompanyList?id_user= " + location.state.id_us , {
          method: "POST",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        });
        const data = await response.json();
        var arr = data.map(function(obj) {
          return obj.name
        });
        setCompanyNames(arr);
      }

      const GetLogs = async () => {

        requestInProgress.current = true;
        const datasend = {
            "skip": skip,
            "take": 180      
        };

        Object.assign(datasend, objfilters);

        const response = await fetch(baseUrl + "?id_user= " + location.state.id_us , {
          method: "POST",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(datasend)
        });
        const data = await response.json();
            
        requestInProgress.current = false;

        let newLogs;
        if(RefreshData){
            newLogs = new Array(total).fill({}).map((e,i) => ({
              index: i,
          }));
          setRefreshData(false);
        } else {
          newLogs = 
          logs.length === total 
            ? [...logs] : new Array(total).fill({}).map((e,i) => ({
                index: i,
            }));
        }
        
        

        data.forEach((log,i) => {
            newLogs[i+skip] = {
                index: i +skip,
                ...log
            };
        });
        setLogs([]);
        setLogs(newLogs);
    };
  
  
          GetLogs();
          GetSubType();
          GetCompanyNames();
          GetData1();

   
    };
  
    React.useEffect(() => {
      if(!RefreshData){
        requestIfNeeded(page.skip);
      }
      
    }, [logs]);

    React.useEffect(() => {
      // request the first page on initial load
      requestData(0);
    }, []);

    React.useEffect(() => {
      // request the first page on initial load
      requestData(0);
    }, [objfilters]);

    
  
    const pageChange = (event) => {
      requestIfNeeded(event.page.skip);
      setPage(event.page);  
    };

    const expandChange = async(event) => {
      event.dataItem.expanded= event.value;
      setLogs([...logs]);
     

      if (!event.value) {
        event.nativeEvent.path[2].style.backgroundColor = ""; //tr.k-master-row
        return;
      } else if (event.dataItem.description) {
        event.nativeEvent.path[2].style.backgroundColor = "rgba(85,85,85,0.1)";
        return;
      }

      event.nativeEvent.path[2].style.backgroundColor = "rgba(85,85,85,0.1)";

      const response = await fetch("https://localhost:44365/Logs/GetDescription?id= " + event.dataItem.id  , {
          method: "POST",
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        });

        const data = await response.json();

        let index = logs.findIndex((d: any) => d.id === event.dataItem.id);
        logs[index].description = data[0].description;
        setLogs(logs);

    };

   

    const loadingCell = (tdElement, props) => {
      //const field = props.field || "";
      const field = "id";
      if (props.dataItem[field] === undefined) {
        return (
          <td>
            {" "}
            <Skeleton
              shape={"text"}
              style={{
                width: "100%",
              }}
            />
          </td>
        );
      }
  
      return tdElement;
    };

    const rowRender = (trElement, props) => {
     
      const available = props.dataItem.action == undefined ? undefined : (props.dataItem.action == 'true' ? true : false);
      const green = {
        backgroundColor: "rgb(55, 180, 0,0.32)",
      };
      const red = {
        backgroundColor: "rgb(243, 23, 0, 0.32)",
      };
      const white ={
        backgroundColor: "rgb(0, 0, 0, 0)",
      }
      const trProps = {
        style: available == undefined ? white : (available ? green : red),
      };
      return React.cloneElement(
        trElement,
        { ...trProps },
        trElement.props.children
      );
    };
   


    return(
      <div>
        <div className="main-header-logs">
          <div className="header">
            <div className="logo-header">
                <img className="logo" src={logo}></img>
            </div>
            <div className="user-details">
              <div className="txt-large">{location.state.user_name}</div>
            </div>
          </div>
        </div>
        <div className="content-part">
          <div className="nav-section">
            <div className="nav">
              <div className="txt-large">Logs</div>
            </div>
          </div>
          <div className="logs-section">      
            <div className="table-fix-head">
              <Grid
                  style={{
                      height: "800px",
                  }}
                  rowHeight= {40}
                  detailRowHeight = {340}
                  data={logs.slice(page.skip, page.skip + 20)}
                  pageSize={pageSize}
                  total={total}
                  skip={page.skip}
                  scrollable={"virtual"}
                  onPageChange={pageChange}
                  cellRender={loadingCell}
                  filterable={true}
                  filter={filter}
                  onFilterChange={filterChange}
                  detail={DetailComponent}
                  expandField="expanded"
                  onExpandChange={expandChange}
              >
                  <GridColumn field="id" title="ID" filterable={false} className="id-log"></GridColumn>
                  <GridColumn field="time" title="Time" format="{0: MM/dd/yyyy}"  filterable={false} className="time-log"></GridColumn>
                  <GridColumn field="type" title="Type" filterable={false} className="type-log"></GridColumn>
                  <GridColumn field="subType" title="Sub Type" filterCell={CategoryFilterCellSubType} className="sub-type-log"></GridColumn>
                  <GridColumn field="data1" title="Data" filterCell={CategoryFilterCellData1} className="data-log"></GridColumn>
                  <GridColumn 
                      field="action" 
                      title="Action"
                      filterCell={CategoryFilterCell}
                      className="action-log"
                  >   
                  </GridColumn>
                  <GridColumn field="sendingObject" title="Sending Object" filterable={false} className="send-obj-log"></GridColumn>
                  <GridColumn field="name" title="Company Name" filterCell={CategoryFilterCellCompany} className="company-log"></GridColumn>
              </Grid>
            </div>
          </div>
        </div>
      </div>
         
       
    );
};

export default Logs;