import React, { useEffect, useState } from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography, Box, Grid } from '@mui/material';
import { ExpandMore } from '@mui/icons-material';
import PropTypes from "prop-types";
import CommonTable from '../components/CommonTable.js';
import Loader from '../components/Loader.js';
import './TopUsersScreen.css';
import "../components/Loader.css"


function TopUsersScreen({ data, loading , filters, isAutoHeight }) {

  const [columnForAct, setColumnForAct] = useState([]);
  const [columnForSleep, setColumnForSleep] = useState([]);
  const [columnForCall, setColumnForCall] = useState([]);
  const [dataForActive, setDataForActive] = useState([]);
  const [dataForSleep, setDataForSleep] = useState([]);
  const [dataForCall, setDataForCall] = useState([]);

 

  useEffect(() => {
    setColumnForAct([
      { field: 'EmployeeName', headerName: 'Employee', type: String, sortable: false, filterable: false, flex: 3 },
      { field: 'Top10_ActiveTime', headerName: 'Duration', type: Number, sortable: false, filterable: false, flex: 2 },
    ]);
    setColumnForSleep([
      { field: 'EmployeeName', headerName: 'Employee', type: 'string', sortable: false, filterable: false, flex: 3  },
      { field: 'Top10_IdleTime', headerName: 'Duration', type: Number, sortable: false, filterable: false, flex: 2  },
    ]);
    setColumnForCall([
      { field: 'EmployeeName', headerName: 'Employee', type: 'string', sortable: false, filterable: false, flex: 3  },
      { field: 'CallsCount', headerName: 'Count', type: String, sortable: false, filterable: false, flex: 1  },
      { field: 'Top10_Call_Duration', headerName: 'Duration', type: Number, sortable: false, filterable: false, flex: 2  },
    ]);

    
      const dataForTop10Active = data.SystemLoginDetailsTop10ActiveTime || [];
      const dataForTop10Sleep = data.SystemLoginDetailsTop10SleepTime || [];
      const dataForTop10Calls = data.SystemLoginDetailsTop10CallDurationTime || [];
      setDataForActive(dataForTop10Active);
      setDataForSleep(dataForTop10Sleep);
      setDataForCall(dataForTop10Calls);
  }, [data])

  const cols ={ id: 'EmpCode', label: 'Employee', type: 'string' }

  return (
    <div>
      <Accordion defaultExpanded className="mt-mb-10 radius-10 noborder">
        <AccordionSummary
          expandIcon={<ExpandMore />}
          aria-controls="panel2-content"
          id="panel2-header"
          className="accordion-head noborder"
        >
          <Typography>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <strong>Top 10 Users</strong>
            </div>
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            <Box style={{ maxWidth: '100%' }}>
              <Grid container spacing={1}>
                <Grid xs={4} item>
                  <div className="green tab">
                    <div className='borderR' style={{ color: "#fff", fontSize: "20px", fontWeight: "400", textAlign: "center", height: "50px" ,backgroundColor:"#4fab4f"}}>
                      Active
                    </div>
                   
                    {columnForAct?.length > 0 && (
                      <CommonTable
                        title="Dashboard"
                        data={dataForActive}
                        disableSorting
                        style={{ width: '100%' }}
                        columns={columnForAct}
                        defaultSortColumn=""
                        cols={cols}
                        className="top"
                        filters={filters}
                        isAutoHeight={isAutoHeight}
                      />
                    )}
                     {loading && <Loader />}
                  </div>
                </Grid>
                <Grid xs={4} item>
                  <div className="skyblue tab">
                    <div className='borderR' style={{ color: "#fff", fontSize: "20px", fontWeight: "400", textAlign: "center", height: "50px" ,backgroundColor:"#4fab4f"  }}>
                      Idle
                    </div>
                   
                    {columnForSleep?.length > 0 && (
                      <CommonTable
                        title="Dashboard"
                        data={dataForSleep}
                        disableSorting
                        style={{ width: '100%' }}
                        columns={columnForSleep}
                        defaultSortColumn=""
                        cols={cols}
                        className="top"
                        isAutoHeight={isAutoHeight}
                      />
                    )}
                     {loading && <Loader />}
                  </div>
                </Grid>
                <Grid xs={4} item>
                  <div className="orange tab">
                    <div className='borderR' style={{ color: "#fff", fontSize: "20px", fontWeight: "400", textAlign: "center", height: "50px" ,backgroundColor:"#4fab4f"}}>
                      Call
                    </div>
                   
                    {columnForCall?.length > 0 && (
                      <CommonTable
                        title="Dashboard"
                        data={dataForCall}
                        disableSorting
                        style={{ width: '100%' }}
                        columns={columnForCall}
                        defaultSortColumn=""
                        cols={cols}
                        className="top"
                        isAutoHeight={isAutoHeight}
                      />
                    )}
                     {loading && <Loader />}
                  </div>
                </Grid>
              </Grid>
            </Box>
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}
TopUsersScreen.propTypes = {
  data: PropTypes.shape({
    SystemLoginDetailsTop10ActiveTime: PropTypes.arrayOf(PropTypes.object),
    SystemLoginDetailsTop10SleepTime: PropTypes.arrayOf(PropTypes.object),
    SystemLoginDetailsTop10CallDurationTime: PropTypes.arrayOf(PropTypes.object),
  }).isRequired,
  loading: PropTypes.bool,
  filters: PropTypes.object,
  isAutoHeight: PropTypes.bool,
};

export default TopUsersScreen;
