/**
 * 社交媒体共享组件
 */

import { Menu, MenuItem, Box, useTheme } from '@mui/material';
import { useMemoizedFn } from 'ahooks';
import { Icon } from '@iconify/react';
import {
  FacebookIcon,
  FacebookShareButton,
  RedditIcon,
  RedditShareButton,
  TelegramIcon,
  TelegramShareButton,
  TwitterShareButton,
  XIcon,
  WeiboIcon,
  WeiboShareButton,
  LinkedinIcon,
  LinkedinShareButton,
} from 'react-share';
import Toast from '../Toast';
import { translate } from '../Locale/util';

const shareButtonStyle = {
  display: 'flex',
  alignItems: 'center',
  width: '100%',
  '& > button': {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    justifyContent: 'flex-start',
  },
};

export interface SharedProps {
  title: string; // 分享标题
  url: string; // 分享链接
}

const translations = {
  en: {
    copyLink: 'Copy Link',
    x: 'X (Twitter)',
    telegram: 'Telegram',
    reddit: 'Reddit',
    facebook: 'Facebook',
    weiBo: 'Weibo',
    linkedin: 'LinkedIn',
    copySuccess: 'Link copied to clipboard',
  },
  zh: {
    copyLink: '复制链接',
    x: 'X (Twitter)',
    telegram: 'Telegram',
    reddit: 'Reddit',
    facebook: 'Facebook',
    weiBo: '微博',
    linkedin: 'LinkedIn',
    copySuccess: '链接已复制到剪贴板',
  },
};

const buttonSx = {
  display: 'flex',
  alignItems: 'center',
  gap: 1.5,
  minWidth: 120,
  lineHeight: '1!important',
};

const itemIconSx = (theme: any) => ({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: 22,
  height: 22,
  border: 1,
  borderColor: theme.palette.text.secondary,
  borderRadius: 0.75,
});

export default function SocialShare({
  anchorEl,
  onClose,
  sharedProps,
  locale = 'en',
}: {
  anchorEl: HTMLElement | null;
  onClose: () => void;
  sharedProps: SharedProps;
  locale?: string;
}) {
  const theme = useTheme();
  const shareOpen = Boolean(anchorEl);

  const t = useMemoizedFn((key, data = {}) => {
    return translate(translations, key, locale, 'en', data);
  });

  const iconProps = {
    bgStyle: { fill: theme.palette.background.paper },
    iconFillColor: theme.palette.text.secondary,
  };

  const { title, url } = sharedProps;

  const handleCopyLink = () => {
    if (!url) {
      return;
    }
    navigator.clipboard.writeText(url).then(() => {
      Toast.success(t('copySuccess'));
    });
  };

  return (
    <Menu
      id="basic-menu"
      anchorEl={anchorEl}
      open={shareOpen}
      onClose={onClose}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'left',
      }}
      sx={{
        '& .MuiPaper-root': {
          marginTop: '-140px', // 向上移动菜单
        },
      }}
      slotProps={{
        paper: {
          'aria-labelledby': 'basic-button',
        },
      }}>
      <MenuItem
        key="copy-to-clipboard"
        onClick={() => {
          handleCopyLink();
          onClose();
        }}
        sx={shareButtonStyle}>
        <Box sx={buttonSx}>
          <Box sx={itemIconSx}>
            <Icon icon="tabler:link" />
          </Box>
          <span>{t('copyLink')}</span>
        </Box>
      </MenuItem>
      <MenuItem key="share-to-x" onClick={onClose} sx={shareButtonStyle}>
        <Box component={TwitterShareButton} url={url} title={title} sx={buttonSx}>
          <Box component={XIcon} sx={itemIconSx} round {...iconProps} />
          <span>{t('x')}</span>
        </Box>
      </MenuItem>
      <MenuItem key="share-to-telegram" onClick={onClose} sx={shareButtonStyle}>
        <Box component={TelegramShareButton} url={url} title={title} sx={buttonSx}>
          <Box component={TelegramIcon} sx={itemIconSx} round {...iconProps} />
          <span>{t('telegram')}</span>
        </Box>
      </MenuItem>
      <MenuItem key="share-to-reddit" onClick={onClose} sx={shareButtonStyle}>
        <Box component={RedditShareButton} url={url} title={title} sx={buttonSx}>
          <Box component={RedditIcon} sx={itemIconSx} round {...iconProps} />
          <span>{t('reddit')}</span>
        </Box>
      </MenuItem>
      <MenuItem key="share-to-weibo" onClick={onClose} sx={shareButtonStyle}>
        <Box component={WeiboShareButton} url={url} title={title} sx={buttonSx}>
          <Box component={WeiboIcon} sx={itemIconSx} round {...iconProps} />
          <span>{t('weiBo')}</span>
        </Box>
      </MenuItem>
      <MenuItem key="share-to-facebook" onClick={onClose} sx={shareButtonStyle}>
        <Box component={FacebookShareButton} url={url} title={title} sx={buttonSx}>
          <Box component={FacebookIcon} sx={itemIconSx} round {...iconProps} />
          <span>{t('facebook')}</span>
        </Box>
      </MenuItem>
      <MenuItem key="share-to-linkedin" onClick={onClose} sx={shareButtonStyle}>
        <Box component={LinkedinShareButton} url={url} title={title} sx={buttonSx}>
          <Box component={LinkedinIcon} sx={itemIconSx} round {...iconProps} />
          <span>{t('linkedin')}</span>
        </Box>
      </MenuItem>
    </Menu>
  );
}
