import React, { useEffect, useMemo, useState } from 'react';
import styled from '@emotion/styled';
import prettyMs from 'pretty-ms-i18n';
import Box from '@mui/material/Box';
import { Icon } from '@iconify/react';
import Datatable from '@arcblock/ux/lib/Datatable';
import Typography from '@mui/material/Typography';
import { getDisplayName, forEachBlockletSync, isBlockletRunning } from '@blocklet/meta/lib/util';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Tooltip from '@mui/material/Tooltip';
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
import isNumber from 'lodash/isNumber';
import { useBlockletContext } from '../contexts/blocklet';
import { formatLocale, filesize } from '../util';
import BlockletRuntimeInfo from '../blocklet/runtime-info';
import BundleAvatar from '../blocklet/bundle-avatar';
import BlockletStatus from '../blocklet/status';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function RuntimeInsight() {
  const {
    t,
    locale
  } = useLocaleContext();
  const [hours, setHours] = useState(6);
  const {
    blocklet,
    actions: {
      refreshBlocklet
    }
  } = useBlockletContext();
  const monitList = useMemo(() => {
    const arr = [];
    forEachBlockletSync(blocklet, (component, {
      ancestors,
      id,
      level
    }) => {
      if (component?.meta?.did && component.meta.did !== blocklet.meta.did) {
        arr.push({
          type: 'blocklet',
          groupId: blocklet.meta.did,
          groupName: getDisplayName(blocklet),
          id,
          name: getDisplayName(component, true),
          blocklet,
          component,
          level: level - 1 >= 0 ? level - 1 : 0,
          runtimeInfo: component.runtimeInfo,
          ancestors
        });
      }
    });
    return arr;
  }, [blocklet]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    refreshBlocklet({
      hours
    });
    const interval = setInterval(() => {
      refreshBlocklet({
        hours
      });
    }, 1000 * 10);
    return () => {
      clearInterval(interval);
    };
  }, [hours]); // eslint-disable-line react-hooks/exhaustive-deps

  const formatUptime = uptime => {
    return prettyMs(Number(uptime || 0), {
      locale: formatLocale(locale)
    });
  };
  const monitorColumns = [{
    label: t('common.name'),
    name: 'name',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          name,
          component,
          level,
          ancestors
        } = monitList[rawIndex];
        return /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            pl: level * 2
          },
          children: [/*#__PURE__*/_jsx(BundleAvatar, {
            size: 20,
            blocklet: component,
            ancestors: ancestors
          }), /*#__PURE__*/_jsx(Box, {
            sx: {
              ml: 1
            },
            children: name
          }), /*#__PURE__*/_jsx(BlockletStatus, {
            variant: "pin",
            style: {
              marginLeft: 8
            },
            status: isBlockletRunning(component) ? 'running' : component.status,
            source: component.source,
            progress: component.progress
          })]
        });
      }
    }
  }, {
    label: t('common.uptime'),
    name: 'runtimeInfo.uptime',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          runtimeInfo,
          component
        } = monitList[rawIndex];
        if (!isBlockletRunning(component)) {
          return /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.noData'),
            children: "--"
          });
        }
        return formatUptime(runtimeInfo?.uptime);
      }
    }
  }, {
    label: t('blocklet.runtimeInfo.memoryUsage'),
    name: 'runtimeInfo.memoryUsage',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          runtimeInfo,
          component
        } = monitList[rawIndex];
        if (!isBlockletRunning(component)) {
          return /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.noData'),
            children: "--"
          });
        }
        return filesize(runtimeInfo?.memoryUsage || 0);
      }
    }
  }, {
    label: t('blocklet.runtimeInfo.cpuUsage'),
    name: 'runtimeInfo.cpuUsage',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          runtimeInfo,
          component
        } = monitList[rawIndex];
        if (!isBlockletRunning(component)) {
          return /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.noData'),
            children: "--"
          });
        }
        return `${(runtimeInfo?.cpuUsage || 0).toFixed(1)}%`;
      }
    }
  }, {
    label: t('analytics.runtime'),
    name: 'runtimeInfo.runtime',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          runtimeInfo
        } = monitList[rawIndex];
        if (!runtimeInfo?.uptime) {
          return null;
        }
        return /*#__PURE__*/_jsxs(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center'
          },
          children: [/*#__PURE__*/_jsx(Icon, {
            icon: runtimeInfo?.runningDocker ? 'catppuccin:docker-ignore' : 'logos:nodejs-icon'
          }), /*#__PURE__*/_jsx(Box, {
            sx: {
              ml: 1
            },
            children: runtimeInfo?.runningDocker ? 'Docker' : 'Nodejs'
          })]
        });
      }
    }
  }, {
    label: t('blocklet.runtimeInfo.processId'),
    name: 'runtimeInfo.pid',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          runtimeInfo,
          component
        } = monitList[rawIndex];
        if (!isBlockletRunning(component)) {
          return /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.noData'),
            children: "--"
          });
        }
        return runtimeInfo?.pid;
      }
    }
  }, {
    label: t('blocklet.runtimeInfo.port'),
    name: 'runtimeInfo.port',
    options: {
      // eslint-disable-next-line react/no-unstable-nested-components
      customBodyRenderLite(rawIndex) {
        const {
          runtimeInfo,
          component
        } = monitList[rawIndex];
        if (!isBlockletRunning(component)) {
          return /*#__PURE__*/_jsx(Tooltip, {
            title: t('common.noData'),
            children: "--"
          });
        }
        return runtimeInfo?.port;
      }
    }
  }];
  return /*#__PURE__*/_jsxs(Div, {
    component: "div",
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        justifyContent: 'space-between',
        flexDirection: 'row',
        mb: 2
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        component: "h3",
        variant: "h5",
        color: "textPrimary",
        style: {
          fontSize: 18,
          fontWeight: 'bold'
        },
        sx: {
          mb: 2
        },
        children: t('analytics.trend')
      }), /*#__PURE__*/_jsx(ToggleButtonGroup, {
        size: "small",
        exclusive: true,
        value: hours,
        onChange: (_e, v) => {
          if (isNumber(v)) {
            setHours(v);
          }
        },
        children: [1, 3, 6, 12, 24].map(x => /*#__PURE__*/_jsxs(ToggleButton, {
          value: x,
          children: [x, "H"]
        }, x))
      })]
    }), /*#__PURE__*/_jsx(Box, {
      children: /*#__PURE__*/_jsx(BlockletRuntimeInfo, {
        blocklet: blocklet
      })
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: 3
      },
      children: /*#__PURE__*/_jsx(Datatable, {
        title: t('analytics.detail'),
        className: "monitor-table",
        locale: locale,
        data: monitList,
        columns: monitorColumns,
        options: {
          search: false,
          download: false,
          filter: false,
          print: false,
          viewColumns: false,
          pagination: false,
          rowsPerPage: 100
        }
      })
    })]
  });
}
const Div = styled(Typography)``;