import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';

import '../../common/core/assets_const.dart';
import '../../common/widgets/we_app_bar.dart';
import '../../utils/image_util.dart';
import 'bloc.dart';
import 'event.dart';
import 'state.dart';

Widget buildRadioOption({
  required int value,
  required ImageProvider icon,
  required String text,
  required int groupValue,
  required ValueChanged onChanged,
}) {
  return Row(
    children: [
      Image(image: icon,
          width: 20.0.w,
          height: 20.0.h,
          fit: BoxFit.contain),
      const SizedBox(width: 10.0),
      // Expanded(
      //   child: Text(
      //     text,
      //     style: TextStyle(color: Color(0xFF333333), fontSize: 12.5.sp),
      //   ),
      // ),
      Text(
        text,
        style: TextStyle(color: Color(0xFF333333), fontSize: 12.5.sp),
      ),
      Radio(
          value: value,
          groupValue: groupValue,
          onChanged: onChanged
      ),
    ],
  );
}

class ShoppingPage extends StatelessWidget {
  const ShoppingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) =>
      ShoppingBloc()
        ..add(InitEvent()),
      child: _ShoppingView(),
    );
  }
}

class _ShoppingView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of<ShoppingBloc>(context);
    return BlocListener<ShoppingBloc, ShoppingState>(
      listener: (context, state) {
      },
      child: Scaffold(
        appBar: const WEAppBar(
          //标题传进来的
          titleText: '支付',
        ),
        body: Container(
          margin: const EdgeInsets.only(left: 80.0, top: 28.0, right: 56.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CachedNetworkImage(
                imageUrl: "${bloc.productData?.url}",
                imageBuilder: (context, imageProvider) =>
                    Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: imageProvider,
                          fit: BoxFit.cover,
                        ),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                    ),
                placeholder: (context, url) =>
                const CircularProgressIndicator(),
                // errorWidget: (context, url, error) => const Icon(Icons.error),
                height: 210.0.h,
                width: 210.0.w,
              ),
              const SizedBox(width: 35.5),
              _paymentWidget(),
            ],
          ),
        ),
      ),);
  }
}

Widget _paymentWidget() =>
    BlocBuilder<ShoppingBloc, ShoppingState>
      (
      builder: (context, state) {
        final bloc = BlocProvider.of<ShoppingBloc>(context);
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('套餐价格：${bloc.productData?.price ?? "199（记得删除）"}',
                style: TextStyle(
                    color: const Color(0xFF333333), fontSize: 16.sp)),
            const SizedBox(height: 15.0),
            Text('套餐名称：${bloc.productData?.name ?? ''}',
                style: TextStyle(
                    color: const Color(0xFF333333), fontSize: 16.sp)),
            const SizedBox(height: 15.0),
            Container(
              padding:
              EdgeInsets.symmetric(horizontal: 6.w, vertical: 10.h),
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: ImageUtil.getImageProviderOnDefault(
                          AssetsConst.bgUserInformationText),
                      fit: BoxFit.fill)),
              child: const Text('支付方式选择',
                  style: TextStyle(
                      color: Color(0xFF333333),
                      fontSize: 12,
                      fontFamily: 'PingFangSC-Regular')),
            ),
            const SizedBox(height: 15.0),
            buildRadioOption(
              value: PaymentChannel.wechatPay.payChannelType,
              icon: AssetImage('weixin'.assetPng),
              text: PaymentChannel.wechatPay.payChannelName,
              groupValue: bloc.curPaymentChannel.payChannelType,
              onChanged: (newValue) {
                bloc.add(
                    ChangePaymentChannelEvent(PaymentChannel.wechatPay));
              },
            ),
            buildRadioOption(
              value: PaymentChannel.aliPay.payChannelType,
              icon: AssetImage('zhifubao'.assetPng),
              text: PaymentChannel.aliPay.payChannelName,
              groupValue: bloc.curPaymentChannel.payChannelType,
              onChanged: (newValue) {
                bloc.add(
                    ChangePaymentChannelEvent(PaymentChannel.aliPay));
              },
            ),
            const SizedBox(height: 15.0),
            // 确认支付按钮
            InkWell(
              onTap: () {
              },
              child: Image(
                width: 125.w,
                height: 45.h,
                image: AssetImage('btn_pay'.assetPng),
              ),
            ),
          ],
        );
      },
    );