import { Image, Text, View } from "@tarojs/components";
import { ActionSheet, Button } from "@nutui/nutui-react-taro";

export interface IShareActionSheetProps {
  visible: boolean;
  setVisible: (value: boolean) => void;
  onShareWechat?: () => void;
  onSharePoster?: () => void;
  onShareLink?: () => void;
  onCancel?: () => void;
  callback?: () => void;
}

export default function ShareActionSheet(props: IShareActionSheetProps) {
  const {
    visible,
    setVisible,
    onShareWechat,
    onSharePoster,
    onShareLink,
    onCancel,
    callback,
  } = props;

  return (
    <ActionSheet
      visible={visible}
      cancelText="取消"
      onSelect={() => {
        setVisible(false);
      }}
      onCancel={() => {
        setVisible(false);
        callback?.();
        onCancel?.();
      }}
    >
      <View
        className={"grid grid-flow-col grid-cols-3 grid-rows-1 gap-2 bg-white"}
      >
        <Button
          openType={"share"}
          hoverClass={"none"}
          className={"!h-auto !border-none !p-0 !text-sm !text-gray-400"}
          onClick={() => {
            onShareWechat?.();
          }}
        >
          <View
            className={
              "col-span-1 row-span-1 flex flex-col items-center justify-center pb-4 pt-8"
            }
          >
            <Image
              src={
                "https://funimg.pddpic.com/wxappimg/0f232ec3-f3d4-480e-80d5-65837575650e.png.slim.png"
              }
              className={"h-[84rpx] w-[84rpx] rounded-full bg-neutral-100"}
            />
            <Text className={"mt-2 text-sm text-gray-400"}>分享到微信</Text>
          </View>
        </Button>
        <View
          onClick={() => {
            onSharePoster?.();
          }}
          className={
            "col-span-1 row-span-1 flex flex-col items-center justify-center pb-4 pt-8"
          }
        >
          <Image
            src={
              "https://funimg.pddpic.com/wxappimg/e85a73ac-ae1d-4c7c-b730-539815306534.png.slim.png"
            }
            className={"h-[84rpx] w-[84rpx] rounded-full bg-neutral-100"}
          />
          <Text className={"mt-2 text-sm text-gray-400"}>分享海报</Text>
        </View>
        <View
          onClick={() => {
            onShareLink?.();
          }}
          className={
            "col-span-1 row-span-1 flex flex-col items-center justify-center pb-4 pt-8"
          }
        >
          <Image
            src={
              "https://funimg.pddpic.com/wxappimg/9f7ced70-e714-427d-9d49-370f2016b3be.png.slim.png"
            }
            className={"h-[84rpx] w-[84rpx] rounded-full bg-neutral-100"}
          />
          <Text className={"mt-2 text-sm text-gray-400"}>复制链接</Text>
        </View>
      </View>
    </ActionSheet>
  );
}
