import Taro from "@tarojs/taro";
import { Camera, View, Text } from "@tarojs/components";
import { useCallback } from "react";

export default function Page() {
  const handleBack = useCallback(() => {
    Taro.navigateBack({
      delta: 1,
    });
  }, []);

  return (
    <View className="relative h-screen w-full">
      <Camera
        className={"absolute h-screen w-full"}
        mode={"scanCode"}
        flash={"auto"}
        devicePosition={"back"}
        resolution={"high"}
        onScanCode={(e) => {
          console.log("扫码结果为：", e.detail.result);

          Taro.eventCenter.trigger("scanCode", {
            result: e.detail.result,
          });

          Taro.navigateBack({
            delta: 1,
          });
        }}
      />

      {/* 遮罩层 */}
      <View className="absolute left-0 top-0 h-full w-full bg-black bg-opacity-30" />

      {/* 扫码区域框 */}
      <View className="absolute left-1/2 top-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 transform">
        {/* 扫描框角标 */}
        <View className="absolute left-0 top-0 h-1 w-8 rounded-r bg-green-500" />
        <View className="absolute left-0 top-0 h-8 w-1 rounded-b bg-green-500" />

        <View className="absolute right-0 top-0 h-1 w-8 rounded-l bg-green-500" />
        <View className="absolute right-0 top-0 h-8 w-1 rounded-b bg-green-500" />

        <View className="absolute bottom-0 left-0 h-1 w-8 rounded-r bg-green-500" />
        <View className="absolute bottom-0 left-0 h-8 w-1 rounded-t bg-green-500" />

        <View className="absolute bottom-0 right-0 h-1 w-8 rounded-l bg-green-500" />
        <View className="absolute bottom-0 right-0 h-8 w-1 rounded-t bg-green-500" />
      </View>

      {/* 提示文字 */}
      <View className="absolute left-1/2 top-1/2 -translate-x-1/2 translate-y-48 transform">
        <Text className="block text-center text-lg text-white">
          将二维码放入框内，即可自动扫描
        </Text>
      </View>

      {/* 关闭按钮 */}
      <View
        className="absolute bottom-10 left-1/2 flex h-16 w-16 -translate-x-1/2 transform items-center justify-center rounded-full bg-black bg-opacity-30"
        onClick={handleBack}
      >
        <Text className="text-xl text-white">✕</Text>
      </View>
    </View>
  );
}
