import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useContext } from 'react';
import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import { Badge, Box } from '@mui/material';
import InfoRow from '@arcblock/ux/lib/InfoRow';
import Dialog from '@arcblock/ux/lib/Dialog';
import { getDisplayName, hasStartEngine, isBlockletRunning } from '@blocklet/meta/lib/util';
import { formatPerson } from '@blocklet/meta/lib/fix';
import ExternalLink from '@mui/material/Link';
import RelativeTime from '@arcblock/ux/lib/RelativeTime';
import { useDeletingBlockletContext } from '../../contexts/deleting-blocklets';
import Tag from '../../tag';
import DidAddress from '../../did-address';
import BlockletSource from '../blocklet-source';
import BlockletStatus from '../status';
import BlockletVersion from '../version';
import BlockletOwnerInfo from './blocklet-owner-info';
import { jsx as _jsx } from "react/jsx-runtime";
const isResource = component => !component?.meta?.group;
const getEngineRows = (engine, t) => {
  if (!engine) {
    return [];
  }
  return [{
    name: t('common.name'),
    value: engine.displayName
  }, {
    name: t('common.description'),
    value: engine.description
  }, {
    name: t('common.version'),
    value: /*#__PURE__*/_jsx(Tag, {
      children: engine.version
    })
  }];
};
const getSourceInfo = blocklet => {
  const {
    source,
    deployedFrom,
    bundleSource
  } = blocklet;
  if (source) {
    return {
      source,
      deployedFrom
    };
  }
  if (!bundleSource) {
    return {
      source: 'upload',
      deployedFrom
    };
  }
  if (bundleSource.url) {
    const deployedAddress = deployedFrom || Array.isArray(bundleSource.url) ? bundleSource.url[0] : bundleSource.url;
    return {
      source: 'url',
      deployedFrom: deployedAddress,
      link: deployedAddress
    };
  }
  if (bundleSource.store) {
    const deployedAddress = deployedFrom || Array.isArray(bundleSource.store) ? bundleSource.store[0] : bundleSource.store;
    return {
      source: 'registry',
      deployedFrom: deployedAddress,
      link: deployedAddress
    };
  }
  return {};
};
const getComponentName = (componentId, app) => {
  const ids = componentId.split('/').slice(1);
  let parent = app;
  let index = 0;
  const names = [];
  while (parent && index < ids.length) {
    // eslint-disable-next-line no-loop-func
    const component = parent.children.find(x => x.meta.did === ids[index]);
    parent = component;
    index++;
    if (component) {
      names.push(component.meta.title);
    }
  }
  return names.join(' / ');
};
export default function ComponentInfoDialog({
  blocklet,
  depth = 0,
  componentInfo = null,
  app = null,
  onClose
}) {
  const {
    t,
    locale
  } = useContext(LocaleContext);
  const {
    deletingBlocklets: deletingComponents
  } = useDeletingBlockletContext();

  // eslint-disable-next-line prefer-const
  let {
    status,
    greenStatus
  } = blocklet;
  if (status === 'running' || greenStatus === 'running') {
    status = 'running';
  }
  if (depth === 1 && deletingComponents.includes(blocklet.meta.did)) {
    status = 'deleting';
  }
  const mountPoint = `/${blocklet.mountPoint || '/'}`.replace(/\/+/g, '/');
  const renderRows = rows => rows.map(row => {
    if (row.name === t('common.did') || row.name === t('blocklet.appId')) {
      return /*#__PURE__*/_jsx(InfoRow, {
        valueComponent: "div",
        nameWidth: 120,
        name: row.name,
        nameFormatter: () => row.name,
        children: row.value
      }, row.name);
    }
    return /*#__PURE__*/_jsx(InfoRow, {
      valueComponent: "div",
      nameWidth: 120,
      name: row.name,
      children: row.link ? /*#__PURE__*/_jsx(ExternalLink, {
        href: row.link,
        target: "_blank",
        className: "page-link",
        underline: "hover",
        children: row.value
      }) : row.value
    }, row.name);
  });
  const sourceInfo = componentInfo ? getSourceInfo(componentInfo) : {};
  const componentRows = componentInfo ? [{
    name: t('common.name'),
    value: getDisplayName(componentInfo, true)
  }, {
    name: t('common.version'),
    value: /*#__PURE__*/_jsx(BlockletVersion, {
      blocklet: componentInfo,
      checkUpgrade: false
    })
  }, {
    name: t('common.status'),
    value: /*#__PURE__*/_jsx(BlockletStatus, {
      isResource: isResource(blocklet),
      status: status,
      source: componentInfo.source,
      progress: blocklet.progress
    })
  }, isBlockletRunning(blocklet) ? {
    name: t('blocklet.startedAt'),
    value: blocklet.startedAt ? /*#__PURE__*/_jsx(RelativeTime, {
      value: blocklet.startedAt,
      type: "all",
      locale: locale
    }) : '-'
  } : null, !isBlockletRunning(blocklet) ? {
    name: t('blocklet.stoppedAt'),
    value: blocklet.stoppedAt ? /*#__PURE__*/_jsx(RelativeTime, {
      value: blocklet.stoppedAt,
      type: "all",
      locale: locale
    }) : '-'
  } : null, blocklet.installedAt ? {
    name: t('blocklet.installedAt'),
    value: blocklet.installedAt ? /*#__PURE__*/_jsx(RelativeTime, {
      value: blocklet.installedAt,
      type: "all",
      locale: locale
    }) : '-'
  } : null, hasStartEngine(blocklet.meta) ? {
    name: t('common.mountPoint'),
    value: mountPoint
  } : null, componentInfo.meta.group ? {
    name: t('common.group'),
    value: /*#__PURE__*/_jsx(Tag, {
      type: "success",
      children: componentInfo.meta.group
    })
  } : null, {
    name: t('blocklet.overview.source'),
    value: /*#__PURE__*/_jsx(BlockletSource, {
      sourceInfo: sourceInfo,
      blocklet: blocklet
    })
  }, {
    name: t('blocklet.overview.deployedFrom'),
    value: sourceInfo.deployedFrom || '-',
    link: sourceInfo.link ?? ''
  }, {
    name: t('common.did'),
    value: /*#__PURE__*/_jsx(DidAddress, {
      did: componentInfo.meta.did,
      showQrcode: true
    })
  }, {
    name: t('common.author'),
    value: componentInfo.meta.owner ? /*#__PURE__*/_jsx(BlockletOwnerInfo, {
      owner: componentInfo.meta.owner,
      locale: locale
    }) : formatPerson(componentInfo.meta.author)
  }, {
    name: t('common.engine'),
    value: getEngineRows(componentInfo.engine, t).map(({
      name,
      value
    }) => /*#__PURE__*/_jsx(InfoRow, {
      style: {
        marginBottom: 4
      },
      nameWidth: 120,
      name: name,
      children: value
    }, name))
  }, blocklet.dependents?.length ? {
    name: t('common.dependents'),
    value: /*#__PURE__*/_jsx(Box, {
      children: blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
        children: `${getComponentName(x.id, app)} ${x.required ? `(${t('common.required')})` : ''}`
      }, x.id))
    })
  } : null, blocklet.meta.resources?.length ? {
    name: t('common.resource'),
    value: blocklet.meta.resources.join(', ')
  } : null].filter(Boolean) : [];
  if (!componentInfo) {
    return null;
  }
  return /*#__PURE__*/_jsx(Dialog, {
    open: true,
    title: t('common.componentBasicInfo'),
    showCloseButton: true,
    fullWidth: true,
    maxWidth: "md",
    onClose: () => {
      onClose(null);
    },
    children: /*#__PURE__*/_jsx(Box, {
      sx: {
        paddingBottom: 1.5
      },
      children: renderRows(componentRows)
    }, "dialog-wrapper")
  }, "base-info-dialog");
}
ComponentInfoDialog.propTypes = {
  blocklet: PropTypes.object.isRequired,
  depth: PropTypes.number,
  app: PropTypes.object,
  componentInfo: PropTypes.object,
  onClose: PropTypes.func.isRequired
};
export const StyledBadge = styled(Badge)`
  .BaseBadge-badge {
    top: ${props => props.top * 8 || 6}px;
    right: ${props => props.right * 8 || 6}px;
  }
`;
export const StyledComponentRow = styled(Box)`
  .component-header {
    display: flex;
    align-items: center;
    align-items: flex-end;
    cursor: pointer;
  }
  .component-name {
    color: ${({
  theme
}) => theme.palette.text.primary};
    font-size: 16px;
  }
  .component-version {
    color: ${({
  theme
}) => theme.palette.grey[400]};
    font-size: 12px;
    margin-left: 4px;
    transform: translateY(-1px);
  }
`;