import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import React, { useCallback, useState } from 'react';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Empty from '@arcblock/ux/lib/Empty';
import xbytes from 'xbytes';
import CpuMonitor from '../analytics/cpu';
import MemoryMonitor from '../analytics/memory';
import { useNodeContext } from '../contexts/node';
import { useBlockletContext } from '../contexts/blocklet';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function BlockletRuntimeInfo({
  blocklet,
  cpuHistory = [],
  memoryHistory = [],
  ...rest
}) {
  const {
    t
  } = useLocaleContext();
  const {
    info
  } = useNodeContext();
  const {
    runtimeHistory
  } = useBlockletContext();
  const [hoverIndex, setHoverIndex] = useState(/** @type {{ seriesIndex: number, dataIndex: number, ref: React.RefObject<HTMLDivElement> } | null} */
  null);
  const getEmptyPlaceholder = useCallback(data => {
    if (blocklet.status !== 'running') {
      return /*#__PURE__*/_jsx(Typography, {
        children: t('blocklet.runtimeInfo.noRunning')
      });
    }
    if (!data.length) {
      return /*#__PURE__*/_jsx(Empty, {
        children: t('common.empty')
      });
    }
    return null;
  }, [blocklet.status, t]);
  const handleHover = useCallback(params => {
    setHoverIndex(params);
  }, []);
  if (runtimeHistory.length === 0) {
    return /*#__PURE__*/_jsx(Typography, {
      children: t('blocklet.runtimeInfo.noRunning')
    });
  }
  return /*#__PURE__*/_jsxs(Div, {
    component: "div",
    ...rest,
    memoryHistory: memoryHistory,
    cpuHistory: cpuHistory,
    children: [/*#__PURE__*/_jsxs(Grid, {
      className: "page-metrics",
      container: true,
      spacing: 5,
      children: [/*#__PURE__*/_jsx(Grid, {
        sx: {
          pt: '16px !important'
        },
        size: 12,
        children: /*#__PURE__*/_jsx(Typography, {
          sx: {
            fontSize: '16px',
            fontWeight: 'bold'
          },
          children: "CPU"
        })
      }), runtimeHistory?.map(x => {
        return /*#__PURE__*/_jsx(Grid, {
          sx: {
            pt: '16px !important'
          },
          size: {
            lg: 4,
            md: 6,
            sm: 6,
            xs: 12
          },
          children: /*#__PURE__*/_jsx(CpuMonitor, {
            title: `${x.name} CPU`,
            empty: getEmptyPlaceholder(x.cpu),
            currentLoad: x.appRuntimeInfo?.cpuUsage || 0,
            cpus: x.appRuntimeInfo?.cpus || [],
            history: x.cpu,
            onHover: handleHover,
            hoverIndex: hoverIndex,
            style: {
              height: 150
            }
          })
        }, `${x.key}-cpu`);
      })]
    }), /*#__PURE__*/_jsxs(Grid, {
      className: "page-metrics",
      container: true,
      spacing: 5,
      sx: {
        mt: 1
      },
      children: [/*#__PURE__*/_jsx(Grid, {
        sx: {
          pt: '16px !important'
        },
        size: 12,
        children: /*#__PURE__*/_jsx(Typography, {
          sx: {
            fontSize: '16px',
            fontWeight: 'bold'
          },
          children: "Memory"
        })
      }), runtimeHistory?.map(x => {
        return /*#__PURE__*/_jsx(Grid, {
          sx: {
            pt: '16px !important'
          },
          size: {
            lg: 4,
            md: 6,
            sm: 6,
            xs: 12
          },
          children: /*#__PURE__*/_jsx(MemoryMonitor, {
            title: `${x.name} Memory`,
            empty: getEmptyPlaceholder(x.memory),
            total: info.runtimeConfig?.blockletMaxMemoryLimit ? xbytes.parseSize(`${info.runtimeConfig.blockletMaxMemoryLimit * (x.key === blocklet?.meta?.did ? runtimeHistory.length - 1 : 1)}MiB`) : 0,
            used: x.appRuntimeInfo?.memoryUsage || 0,
            history: x.memory,
            onHover: handleHover,
            hoverIndex: hoverIndex,
            style: {
              height: 150
            }
          })
        }, `${x.key}-memory`);
      })]
    })]
  });
}
BlockletRuntimeInfo.propTypes = {
  blocklet: PropTypes.object.isRequired,
  cpuHistory: PropTypes.arrayOf(PropTypes.shape({
    date: PropTypes.number,
    value: PropTypes.number
  })),
  memoryHistory: PropTypes.arrayOf(PropTypes.shape({
    date: PropTypes.number,
    value: PropTypes.number
  }))
};
const Div = styled(Typography)``;