import * as React from 'react';
import PropTypes from 'prop-types';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper
} from '@mui/material';
import { calculatePercentages } from '../utils/calculatePercentages.js';
import { useState, useEffect } from 'react';
import "../pages/Dashboard.css";
import { useNavigate } from "react-router-dom";

export default function BasicTable(props) {
  const navigate = useNavigate();
  const rows = props?.Columns || [];
  const TableData = props?.data[0] || {};
  const { SleepCount, IdleCount, ActiveCount, TotalUsageCount } = TableData;
  const [percentage, setPercentage] = useState(0);

  useEffect(() => {
    const times = [SleepCount, IdleCount, ActiveCount];
    const percentageconverter = calculatePercentages(times);
    setPercentage(percentageconverter);
  }, [SleepCount, IdleCount, ActiveCount]);

  const NewsleepCount = convertSecondsToHHMMSS(SleepCount || 0);
  const NewidleCount = convertSecondsToHHMMSS(IdleCount || 0);
  const NewactiveCount = convertSecondsToHHMMSS(ActiveCount || 0);
  const NewtotalUsageCount = convertSecondsToHHMMSS(TotalUsageCount || 0);

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow key="table-head-row">
            <TableCell align="center" style={{ fontWeight: 900 }}>Total Active User</TableCell>
            <TableCell align="center" style={{ fontWeight: 900 }}>Past 24h Active</TableCell>
            <TableCell align="center" style={{ fontWeight: 900 }}>Past 24h Idle</TableCell>
            <TableCell align="center" style={{ fontWeight: 900 }}>Past 24h Sleep</TableCell>
            <TableCell align="center" style={{ fontWeight: 900 }}>Total Usage</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(() => (
            <TableRow
              key={TableData.Device || 'default-row'}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell
                align="center"
                onClick={() => navigate('/users', { state: { from: "button" } })}
                style={{ textDecoration: "none" }}
              >
                <button
                  type="button"
                  className="border-radius-full"
                  style={{
                    backgroundColor: "rgb(28, 170, 222)",
                    padding: "7px",
                    color: "white",
                    cursor: "pointer",
                    border: "none"
                  }}
                >
                  {TableData.TotalActiveUsers || 0}
                </button>
              </TableCell>

              <TableCell align="center">
                <span className="border-radius-left" style={{ backgroundColor: "rgb(28, 170, 222)", padding: "7px", color: "white" }}>
                  {NewactiveCount}
                </span>
                <span className="border-radius-right" style={{ backgroundColor: "#1892be", color: "white", padding: "7px" }}>
                  {percentage[2] || 0}%
                </span>
              </TableCell>

              <TableCell align="center">
                <span className="border-radius-left" style={{ backgroundColor: "rgb(28, 170, 222)", padding: "7px", color: "white" }}>
                  {NewidleCount}
                </span>
                <span className="border-radius-right" style={{ backgroundColor: "#1892be", color: "white", padding: "7px" }}>
                  {percentage[1] || 0}%
                </span>
              </TableCell>

              <TableCell align="center">
                <span className="border-radius-left" style={{ backgroundColor: "rgb(28, 170, 222)", padding: "7px", color: "white" }}>
                  {NewsleepCount}
                </span>
                <span className="border-radius-right" style={{ backgroundColor: "#1892be", color: "white", padding: "7px" }}>
                  {percentage[0] || 0}%
                </span>
              </TableCell>

              <TableCell align="center">
                <span className="border-radius-left border-radius-right" style={{ backgroundColor: "rgb(52, 127, 192)", padding: "7px", color: "white" }}>
                  {NewtotalUsageCount}
                </span>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

// Converts seconds to HH:MM:SS format
function convertSecondsToHHMMSS(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  const formattedHours = String(hours).padStart(2, '0');
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(secs).padStart(2, '0');
  return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}


BasicTable.propTypes = {
  Columns: PropTypes.arrayOf(PropTypes.object),
  data: PropTypes.arrayOf(
    PropTypes.shape({
      SleepCount: PropTypes.number,
      IdleCount: PropTypes.number,
      ActiveCount: PropTypes.number,
      TotalUsageCount: PropTypes.number,
      TotalActiveUsers: PropTypes.number,
      Device: PropTypes.string
    })
  )
};


BasicTable.defaultProps = {
  Columns: [],
  data: [{}]
};
