clash-verge-rev/src/components/proxy/proxy-render.tsx

import {
  ExpandLessRounded,
  ExpandMoreRounded,
  InboxRounded,
} from '@mui/icons-material'
import {
  alpha,
  Box,
  ListItemText,
  ListItemButton,
  Typography,
  styled,
  Chip,
  Tooltip,
} from '@mui/material'
import { memo, useId, useMemo } from 'react'
import { useTranslation } from 'react-i18next'

import { useIconCache } from '@/hooks/use-icon-cache'
import { useVerge } from '@/hooks/use-verge'
import { useThemeMode } from '@/services/states'
import type { ResolvedProxyMember } from '@/types/proxy-view'

import { ProxyGroupHeaderBlock } from './proxy-group-header-block'
import { ProxyGroupTools } from './proxy-group-tools'
import { ProxyHead } from './proxy-head'
import { ProxyItem } from './proxy-item'
import { ProxyItemMini } from './proxy-item-mini'
import type { HeadState } from './use-head-state'
import type { IRenderItem } from './use-render-list'

interface RenderProps {
  item: IRenderItem
  stickyed?: boolean
  isChainMode?: boolean
  onLocation: (group: IRenderItem['group']) => void
  onCheckAll: (groupName: string) => void
  onHeadState: (groupName: string, patch: Partial<HeadState>) => void
  onChangeProxy: (
    group: IRenderItem['group'],
    member: ResolvedProxyMember,
  ) => void
  onGroupToggle?: (group: IRenderItem['group']) => void
}

export const ProxyRender = memo(function ProxyRender(props: RenderProps) {
  const { t } = useTranslation()
  const {
    item,
    stickyed = false,
    onLocation,
    onCheckAll,
    onHeadState,
    onChangeProxy,
    onGroupToggle,
    isChainMode: _ = false,
  } = props
  const { type, group, headState, member, memberCol } = item
  const { verge } = useVerge()
  const enable_group_icon = verge?.enable_group_icon ?? true
  const toolsOnLeft = verge?.proxy_group_tools_position === 'left'
  const headerId = useId()
  const mode = useThemeMode()
  const isDark = mode === 'dark'
  const itembackgroundcolor = isDark ? '#282A36' : '#ffffff'
  const iconCachePath = useIconCache({
    icon: group.icon,
    cacheKey: group.name.replaceAll(' ', ''),
    enabled: enable_group_icon,
  })

  const showType = headState?.showType
  const memberColItemsMemo = useMemo(() => {
    if (type !== 4 || !memberCol) {
      return null
    }

    return memberCol.map((occurrence) => (
      <ProxyItemMini
        key={`${item.key}-${occurrence.memberIndex}`}
        group={group}
        member={occurrence.member}
        selected={group.now === occurrence.member.ref.name}
        showType={showType}
        onClick={(nextMember) => onChangeProxy(group, nextMember)}
      />
    ))
  }, [type, memberCol, item.key, group, showType, onChangeProxy])

  if (type === 0) {
    const nameBlock = (
      <ProxyGroupHeaderBlock
        key="name"
        group={headerId}
        block="name"
        sx={{ flex: '0 1 auto', mr: toolsOnLeft ? 1 : 0 }}
      >
        {enable_group_icon && group.icon?.trim().startsWith('http') && (
          <img
            src={iconCachePath === '' ? group.icon : iconCachePath}
            alt={group.name}
            width="32px"
            style={{ marginRight: '12px', borderRadius: '6px' }}
          />
        )}
        {enable_group_icon && group.icon?.trim().startsWith('data') && (
          <img
            src={group.icon}
            alt={group.name}
            width="32px"
            style={{ marginRight: '12px', borderRadius: '6px' }}
          />
        )}
        {enable_group_icon && group.icon?.trim().startsWith('<svg') && (
          <img
            src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(group.icon)}`}
            alt={group.name}
            width="32px"
          />
        )}
        <ListItemText
          sx={{ flex: '0 1 auto', minWidth: 0 }}
          primary={<StyledPrimary>{group.name}</StyledPrimary>}
          secondary={
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                pt: '2px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
              }}
            >
              <Box
                component="span"
                sx={{
                  marginTop: '2px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }}
              >
                <StyledTypeBox>{group.type}</StyledTypeBox>
                <StyledSubtitle sx={{ color: 'text.secondary' }}>
                  {group.now}
                </StyledSubtitle>
              </Box>
            </Box>
          }
          slotProps={{
            secondary: {
              component: 'div',
              sx: {
                display: 'flex',
                alignItems: 'center',
                color: '#ccc',
              },
            },
          }}
        />
      </ProxyGroupHeaderBlock>
    )

    const proxyCount = (
      <Tooltip title={t('proxies.page.labels.proxyCount')} arrow>
        <div
          style={{
            minWidth: '50px',
            display: 'flex',
            justifyContent: toolsOnLeft ? 'start' : 'end',
            alignItems: 'center',
          }}
        >
          <Chip
            size="small"
            label={`${group.members.length}`}
            sx={{
              mr: toolsOnLeft ? 0 : 1,
              backgroundColor: (theme) =>
                alpha(theme.palette.primary.main, 0.1),
              color: (theme) => theme.palette.primary.main,
            }}
          />
        </div>
      </Tooltip>
    )

    const toolsBlock = (
      <ProxyGroupHeaderBlock
        key="tools"
        group={headerId}
        block="tools"
        sx={{
          flex: '1 1 auto',
          justifyContent: toolsOnLeft ? 'start' : 'end',
          mr: toolsOnLeft ? 2 : 0,
        }}
      >
        {toolsOnLeft && proxyCount}
        <ProxyGroupTools
          side={toolsOnLeft ? 'left' : 'right'}
          url={group.testUrl!}
          groupName={group.name}
          headState={headState!}
          onLocation={() => onLocation(group)}
          onCheckDelay={() => onCheckAll(group.name)}
          onHeadState={(p) => onHeadState(group.name, p)}
        />
        {!toolsOnLeft && proxyCount}
      </ProxyGroupHeaderBlock>
    )

    return (
      <div style={{ padding: '4px 8px' }}>
        <ListItemButton
          dense
          sx={{
            boxShadow:
              stickyed && headState?.open
                ? '0 4px 8px rgba(0, 0, 0, 0.2) !important'
                : undefined,
          }}
          style={{
            background: itembackgroundcolor,
            height: '100%',
            borderRadius: '8px',
          }}
          onClick={() => {
            if (headState?.open) {
              onGroupToggle?.(group)
            }
            onHeadState?.(group.name, { open: !headState?.open })
          }}
        >
          <Box sx={{ width: '100%' }}>
            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
              {toolsOnLeft ? toolsBlock : nameBlock}
              {toolsOnLeft ? nameBlock : toolsBlock}
              {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
            </Box>
          </Box>
        </ListItemButton>
      </div>
    )
  }

  if (type === 1) {
    return (
      <ProxyHead
        sx={{ pl: 2, pr: 3, mt: 0.5, mb: 1 }}
        url={group.testUrl!}
        groupName={group.name}
        headState={headState!}
        onLocation={() => onLocation(group)}
        onCheckDelay={() => onCheckAll(group.name)}
        onHeadState={(p) => onHeadState(group.name, p)}
      />
    )
  }

  if (type === 2) {
    return (
      <ProxyItem
        group={group}
        member={member!.member}
        selected={group.now === member?.member.ref.name}
        showType={headState?.showType}
        sx={{ py: 0, pl: 2 }}
        onClick={(nextMember) => onChangeProxy(group, nextMember)}
      />
    )
  }

  if (type === 3) {
    return (
      <Box
        sx={{
          py: 2,
          pl: 0,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <InboxRounded sx={{ fontSize: '2.5em', color: 'inherit' }} />
        <Typography sx={{ color: 'inherit' }}>
          {t('proxies.page.empty.noProxies')}
        </Typography>
      </Box>
    )
  }

  if (type === 4) {
    return (
      <Box
        sx={{
          height: 56,
          display: 'grid',
          my: 0.5,
          gap: 1,
          px: 2,
          gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
        }}
      >
        {memberColItemsMemo}
      </Box>
    )
  }

  return null
})

const StyledPrimary = styled('span')`
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`
const StyledSubtitle = styled('span')`
  font-size: 13px;
  overflow: hidden;
  color: text.secondary;
  text-overflow: ellipsis;
  white-space: nowrap;
`

const StyledTypeBox = styled(Box)(({ theme }) => ({
  display: 'inline-block',
  border: '1px solid #ccc',
  borderColor: alpha(theme.palette.primary.main, 0.5),
  color: alpha(theme.palette.primary.main, 0.8),
  borderRadius: 4,
  fontSize: 10,
  padding: '0 4px',
  lineHeight: 1.5,
  marginRight: '8px',
}))