import React, { useEffect, useState } from 'react';
import { Grid, Accordion, AccordionSummary, AccordionDetails, Typography, Box } 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 "../components/Loader.css"
import './TopUsersScreen.css';

function BottomUsersScreen({ data, loading, selectedDate, 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(() => {
      const dataForLeast10Active = data.SystemLoginDetailsBottom10ActiveTime || [];
      const dataForLeast10Sleep = data.SystemLoginDetailsBottom10SleepTime || [];
      const dataForLeast10Calls = data.SystemLoginDetailsBottom10CallDurationTime || [];
      setDataForActive(dataForLeast10Active);
      setDataForSleep(dataForLeast10Sleep);
      setDataForCall(dataForLeast10Calls);
      setColumnForAct([
          { field: 'EmployeeName', headerName: 'Employee', type: String, sortable: false, filterable: false, flex: 3 },
          { field: 'Bottom10_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: 'Bottom10_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: 'Bottom10_Call_Duration', headerName: 'Duration', type: Number, sortable: false, filterable: false, flex: 2 },
      ]);
    },[data])
  
    const cols = { field: '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>Bottom 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: "#bf4545",
                        }}
                      >
                        Active
                      </div>
                      {loading && <Loader />}
                      {columnForAct?.length > 0 && (
                        <CommonTable
                          title="Dashboard"
                          data={dataForActive}
                          disableSorting
                          style={{ width: "100%" }}
                          columns={columnForAct}
                          defaultSortColumn=""
                          cols={cols}
                          className="top"
                          isAutoHeight={isAutoHeight}
                        />
                      )}
                    </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: "#bf4545",
                        }}
                      >
                        Idle
                      </div>
                      {loading && <Loader />}
                      {columnForSleep?.length > 0 && (
                        <CommonTable
                          title="Dashboard"
                          data={dataForSleep}
                          disableSorting
                          style={{ width: "100%" }}
                          columns={columnForSleep}
                          defaultSortColumn=""
                          cols={cols}
                          className="top"
                          isAutoHeight={isAutoHeight}
                        />
                      )}
                    </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: "#bf4545",
                        }}
                      >
                        Call
                      </div>
                      {loading && <Loader data-testid="loader" />}
                      {columnForCall?.length > 0 && (
                        <CommonTable
                          title="Dashboard"
                          data={dataForCall}
                          disableSorting
                          style={{ width: "100%" }}
                          columns={columnForCall}
                          defaultSortColumn=""
                          cols={cols}
                          className="top"
                          isAutoHeight={isAutoHeight}
                        />
                      )}
                    </div>
                  </Grid>
                </Grid>
              </Box>
            </Typography>
          </AccordionDetails>
        </Accordion>
      </div>
    );
  }
  BottomUsersScreen.propTypes = {
  data: PropTypes.shape({
    SystemLoginDetailsBottom10ActiveTime: PropTypes.arrayOf(PropTypes.object),
    SystemLoginDetailsBottom10SleepTime: PropTypes.arrayOf(PropTypes.object),
    SystemLoginDetailsBottom10CallDurationTime: PropTypes.arrayOf(PropTypes.object),
  }),
  loading: PropTypes.bool,
  selectedDate: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(Date)
  ]),
  isAutoHeight: PropTypes.bool,
};

BottomUsersScreen.defaultProps = {
  data: {
    SystemLoginDetailsBottom10ActiveTime: [],
    SystemLoginDetailsBottom10SleepTime: [],
    SystemLoginDetailsBottom10CallDurationTime: [],
  },
  loading: false,
  selectedDate: null,
  isAutoHeight: false,
};

export default BottomUsersScreen
