import { Box, Skeleton, styled, Typography } from '@mui/material';
import { Icon } from '@iconify/react';
import { TBox } from '@arcblock/ux/lib/MuiWrap';
import { Link } from 'react-router-dom';
import { BoxProps } from '@mui/material/Box';

export const isExternal = (to: string = ''): boolean => {
  return to.startsWith('http:') || to.startsWith('https:');
};

export const isSameOrigin = (to: string): boolean => {
  try {
    const url = new URL(to);
    return url.origin === window.location.origin;
  } catch {
    return false;
  }
};

export const StateIcon = styled('span')<{ color: string }>(({ theme, color }) => {
  return {
    position: 'relative',
    display: 'inline-block',
    width: theme.spacing(1),
    height: theme.spacing(1),
    borderRadius: '50%',
    backgroundColor: color,
    marginRight: theme.spacing(1),
  };
});
export const StyledBadge = styled(Box)(({ theme }) => ({
  position: 'relative',
  display: 'inline-flex',
  alignItems: 'center',
  height: theme.spacing(3),
  paddingLeft: theme.spacing(1.5),
  paddingRight: theme.spacing(1.5),
  border: '1px solid',
  borderColor: theme.palette.divider,
  borderRadius: (theme.shape.borderRadius as number) * 0.5,
  fontSize: 12,
  overflow: 'hidden',
  '& .app-badge-label': {
    display: 'inline-flex',
    gap: theme.spacing(1),
    alignItems: 'center',
    lineHeight: theme.spacing(3),
    marginLeft: theme.spacing(-1.5),
    paddingLeft: theme.spacing(1.5),
    marginRight: theme.spacing(1),
    fontSize: 12,
    backgroundColor: theme.palette.grey[100],
    color: theme.palette.text.secondary,
    '&::after': {
      content: '""',
      height: theme.spacing(3),
      borderRight: '1px solid',
      borderColor: theme.palette.divider,
      backgroundColor: theme.palette.grey[100],
    },
  },
  '& .app-badge-value': {
    color: theme.palette.text.primary,
    fontSize: 12,
  },
})) as typeof TBox;

export interface BadgeContainerProps extends Omit<BoxProps, 'to'> {
  loading?: boolean;
  to?: string;
}

export function BadgeContainer({ loading = false, children = null, to = '', ...rest }: BadgeContainerProps) {
  const container = (
    <StyledBadge className="app-badge" component={to ? 'a' : 'div'} href={to} {...rest}>
      {children}
    </StyledBadge>
  );

  if (loading) {
    return <Skeleton variant="rounded">{container}</Skeleton>;
  }

  if (to) {
    if (isExternal(to)) {
      const target = isSameOrigin(to) ? '_self' : '_blank';

      // 外部链接跳转
      return (
        <StyledBadge className="app-badge" component="a" href={to} target={target} rel="noreferrer noopener" {...rest}>
          {children}
        </StyledBadge>
      );
    }

    // 内部路由跳转
    return (
      <StyledBadge className="app-badge" component={Link} to={to} {...rest}>
        {children}
      </StyledBadge>
    );
  }

  // 无跳转
  return (
    <StyledBadge className="app-badge" component="div" {...rest}>
      {children}
    </StyledBadge>
  );
}

export interface AppBadgeDefaultProps extends BadgeContainerProps {
  icon?: string;
  label?: string;
  value?: string | number;
  round?: number;
}

export function AppBadgeDefault({ icon = '', label = '', value = '', loading = false, ...rest }: AppBadgeDefaultProps) {
  return (
    <BadgeContainer loading={loading} {...rest}>
      {label && (
        <Typography className="app-badge-label">
          {icon && <Icon icon={icon} />}
          {label}
        </Typography>
      )}
      <Typography className="app-badge-value">{value}</Typography>
    </BadgeContainer>
  );
}
