import { Button } from "@mui/material";
import { Close } from "@mui/icons-material/";
import React, { useEffect, useState } from "react";
import CommonTable from "./CommonTable.js";
import useApiService from "../services/apiService.js"
import { getRunningApplicationDetails } from "../constants/apiEndPoints.js";
import "./TableDataPopup.css"
import Loader from "./Loader.js";
import PropTypes from 'prop-types';

function TableDataPopup({empId, applicationName, togglePopup, summaryFilter, searchText, selectedRange }) {
    const [data, setData] = useState([])
    const[loading, setLoading] = useState(false);
    const {postApi} = useApiService()
    const filterObj = {
      "SearchText": searchText,
      "PageSize": 50,
      "PageNumber": 1,
      "IgnorePaging": false,
      "Filter": {
        "EmpCode": empId,
        "StartedOn": summaryFilter?.CallDate?.startDate || selectedRange?.startDate,
        "EndedOn": summaryFilter?.CallDate?.endDate  || selectedRange?.endDate,
        "ResultsFor":summaryFilter?.ResultsFor || null ,
        "ApplicationName": applicationName
      },
      "SortOrder": null,
      "SortColumn": null
    }
    const [filter , setFilter] = useState({...filterObj})

    const columns = [
        { field: 'description', headerName: 'Description', type: String, flex: 3   },
        { field: 'TotalBrowsingTime', headerName: 'Duration', type: Number, flex: 2   },
        { field: 'StartedOn', headerName: 'Started on', type: Date, flex: 2   },
        { field: 'EndedOn', headerName: 'Ended on', type: Date, flex: 2   },
    ]

    useEffect(()=>{
      getDetails()
      if(data == "" || data == null){
        setLoading(true)
      }
    },[])

  const getDetails = async (updatedFilter) => {
    
    setLoading(true)
    try{ 
      const updatedFilterData = {...filter, ...filterObj,  ...updatedFilter}
      setFilter(updatedFilterData)
      const response = await postApi(getRunningApplicationDetails,updatedFilterData)
      setData(response) 
    }catch(e){
      console.log("e",e.message)
    }finally{
      setLoading(false)
    }
  }  

  return (
    <div >
      <div className="popup-content" >
        <div className="d-flex headingpop">
          <h3 style={{textTransform: "capitalize"}}>{applicationName}</h3>
          <Button>
            <Close onClick={togglePopup} />
          </Button>
        </div>

        <div className="table-outer">
            <CommonTable  onChange={getDetails} filters={filter} data={data} columns={columns} defaultSortColumn="" />
        </div>

     {loading && <Loader/>}
      </div>
    </div>
  );
}

TableDataPopup.propTypes = {
  empId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  applicationName: PropTypes.string.isRequired,
  togglePopup: PropTypes.func.isRequired,
  summaryFilter: PropTypes.object,
  searchText: PropTypes.string,
  selectedRange: PropTypes.shape({
    startDate: PropTypes.string,
    endDate: PropTypes.string,
  })
};

TableDataPopup.defaultProps = {
  summaryFilter: {},
  searchText: '',
  selectedRange: { startDate: '', endDate: '' },
};

export default TableDataPopup;
