import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:qr_code_scanner_plus/qr_code_scanner_plus.dart';

import 'controller.dart';

class QrCodePage extends GetView<QrCodeController> {
  const QrCodePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<QrCodeController>(
      init: QrCodeController(),
      id: 'qrcode',
      builder: (_) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            title: const Text('扫码', style: TextStyle(color: Colors.white)),
            centerTitle: true,
            backgroundColor: Colors.transparent,
            elevation: 0,
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
              onPressed: () => Get.back(),
            ),
            actions: [
              TextButton(
                onPressed: controller.scanFromGallery,
                child: const Text(
                  '相册',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ],
          ),
          body: Stack(
            children: <Widget>[
              _buildQrView(context),
              Positioned(
                bottom: 80.h,
                left: 0,
                right: 0,
                child: _buildControlButtons(),
              ),
            ],
          ),
        );
      },
    );
  }

  /// 构建二维码扫描视图（带动画）
  Widget _buildQrView(BuildContext context) {
    // 定义扫描区域的大小
    var scanArea = (MediaQuery.of(context).size.width < 400 ||
            MediaQuery.of(context).size.height < 400)
        ? 250.0
        : 300.0;

    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        // 底层是相机视图和半透明遮罩
        QRView(
          key: controller.qrKey,
          onQRViewCreated: controller.onQRViewCreated,
          overlay: QrScannerOverlayShape(
            borderColor: Colors.blueAccent,
            borderRadius: 10,
            borderLength: 30,
            borderWidth: 10,
            cutOutSize: scanArea,
          ),
        ),
        // 上层是扫描动画
        AnimatedBuilder(
          animation: controller.scanAnimation,
          builder: (context, child) {
            return Positioned(
              // 计算扫描框的顶部位置，以便动画从顶部开始
              top: (MediaQuery.of(context).size.height - scanArea) / 2,
              child: Transform.translate(
                offset: Offset(0, controller.scanAnimation.value * scanArea),
                child: Container(
                  width: scanArea,
                  height: 2, // 扫描线的高度
                  decoration: BoxDecoration(
                    color: Colors.blueAccent,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.blueAccent.withOpacity(0.7),
                        blurRadius: 8,
                        spreadRadius: 2,
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ],
    );
  }

  /// 构建底部的控制按钮
  Widget _buildControlButtons() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Text(
          '将二维码/条形码放入框内，即可自动扫描',
          style: TextStyle(color: Colors.white, fontSize: 14),
        ),
        const SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            // 闪光灯按钮
            _buildIconButton(
              onPressed: controller.toggleFlash,
              //闪光灯状态的变化
              child: Obx(() => Icon(
                    controller.isFlashOn.value ? Icons.flash_on : Icons.flash_off,
                    color: Colors.white,
                    size: 28,
                  )),
            ),
            // 翻转相机按钮
            _buildIconButton(
              onPressed: controller.flipCamera,
              child: const Icon(
                Icons.flip_camera_ios,
                color: Colors.white,
                size: 28,
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildIconButton({required VoidCallback onPressed, required Widget child}) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.3),
        shape: BoxShape.circle,
      ),
      child: IconButton(
        onPressed: onPressed,
        icon: child,
        iconSize: 32, // 增大点击区域
      ),
    );
  }
}