import { useState } from 'react';
import { Button, Text, View } from '@tarojs/components';
import { handleShareButtonClick, type PageSharePayload } from '../lib/wechat-share';
import './ShareGuide.css';

type ShareNavButtonProps = {
  payload?: PageSharePayload;
};

/**
 * 顶栏分享：
 * - 小程序：open-type=share 弹出微信分享面板
 * - H5 微信：JSSDK share / 右上角引导蒙层
 */
export default function ShareNavButton({ payload }: ShareNavButtonProps) {
  const [guideVisible, setGuideVisible] = useState(false);

  if (process.env.TARO_ENV === 'weapp') {
    return (
      <Button className="page-nav-bar__btn page-nav-bar__share-btn" openType="share" hoverClass="none">
        <Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
      </Button>
    );
  }

  return (
    <>
      <View
        className="page-nav-bar__btn"
        onClick={() => {
          void handleShareButtonClick(payload).then((res) => {
            if (res.showGuide) setGuideVisible(true);
          });
        }}
      >
        <Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
      </View>
      {guideVisible ? (
        <View className="share-guide" onClick={() => setGuideVisible(false)}>
          <View className="share-guide__arrow" />
          <View className="share-guide__card">
            <Text className="share-guide__title">分享给好友</Text>
            <Text className="share-guide__desc">请点击右上角 ··· 选择「发送给朋友」或「分享到朋友圈」</Text>
            <Text className="share-guide__ok">我知道了</Text>
          </View>
        </View>
      ) : null}
    </>
  );
}