import 'dart:async';
import 'dart:ui';

import 'package:Parlando/apis/api_response.dart';
import 'package:Parlando/login/login_router.dart';
import 'package:Parlando/membership/models/membership_entity.dart';
import 'package:Parlando/membership/view_models/membership_view_model.dart';
import 'package:Parlando/payment/payment_service.dart';
import 'package:Parlando/res/constant.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:Parlando/res/resources.dart';
import 'package:Parlando/routers/fluro_navigator.dart';
import 'package:Parlando/extension/int_extension.dart';
import 'package:flutter_inapp_purchase/flutter_inapp_purchase.dart';
import 'package:getwidget/getwidget.dart';
import 'package:provider/provider.dart';

class MembershipPage extends StatefulWidget {
  const MembershipPage({Key? key}) : super(key: key);

  @override
  MembershipPageState createState() => MembershipPageState();
}

class MembershipPageState extends State<MembershipPage>
    with WidgetsBindingObserver {
  bool _isLoading = false;

  final List<Widget> _productWidgets = <Widget>[];

  @override
  void initState() {
    super.initState();
    if (SpUtil.containsKey(Constant.userToken)!) {
      Provider.of<MembershipViewProvider>(context, listen: false)
          .setSelectedMembership(null);
      Provider.of<MembershipViewProvider>(context, listen: false)
          .fetchMembershipData('0');
      PaymentService.instance.initConnection();
    } else {
      NavigatorUtils.push(context, LoginRouter.loginPage, replace: true);
    }
  }

  @override
  Widget build(BuildContext context) {
    ApiResponse apiResponse =
        Provider.of<MembershipViewProvider>(context).response;
    switch (apiResponse.status) {
      case Status.LOADING:
        return const Center(child: CircularProgressIndicator());
      case Status.COMPLETED:
        MembershipData mb = apiResponse.data as MembershipData;
        return SafeArea(
          child: Scaffold(
            backgroundColor: Colors.black,
            body: Container(
              alignment: Alignment.topCenter,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: CachedNetworkImageProvider(mb.bgImages!),
                  fit: BoxFit.fill,
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    alignment: Alignment.centerLeft,
                    child: IconButton(
                      onPressed: () {
                        NavigatorUtils.goBack(context);
                      },
                      icon: const Icon(
                        Icons.arrow_back_ios,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const Spacer(),
                  Container(
                    margin: EdgeInsets.symmetric(
                        vertical: 60.px, horizontal: 20.px),
                    height: MediaQuery.of(context).size.height / 2,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: Colors.grey.shade200.withOpacity(0.1),
                      border: Border.all(
                        color: Colors.grey.shade50,
                        width: 0.5,
                      ), // 边色与边宽度
                    ),
                    child: ClipRect(
                      child: BackdropFilter(
                        filter: ImageFilter.blur(
                          sigmaX: 10.0,
                          sigmaY: 10.0,
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.grey.shade200.withOpacity(0.1),
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(10.px),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  mb.title!,
                                  style: TextStyle(
                                    fontSize: 18.px,
                                    color: Colors.white,
                                  ),
                                ),
                                Gaps.vGap24,
                                // TODO 如果会员则显示会员详情
                                SizedBox(
                                  width: double.infinity,
                                  height: 100,
                                  child: _productWidgets.isEmpty
                                      ? Column(
                                          children: _productWidgets,
                                        )
                                      : const GFLoader(),
                                ),
                                Gaps.vGap24,
                                Text(
                                  mb.intro!,
                                  style: TextStyle(
                                    fontSize: 14.px,
                                    color: Colors.white,
                                  ),
                                ),
                                Gaps.vGap10,
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    TextButton(
                                      onPressed: () {},
                                      child: Text(
                                        "服务协议",
                                        style: TextStyle(
                                          fontSize: 14.px,
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                    Container(
                                      width: 0.6,
                                      height: 15.0,
                                      color: Colours.line,
                                    ),
                                    TextButton(
                                      onPressed: () {},
                                      child: Text(
                                        "隐私政策",
                                        style: TextStyle(
                                          fontSize: 14.px,
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                    Container(
                                      width: 0.6,
                                      height: 15.0,
                                      color: Colours.line,
                                    ),
                                    TextButton(
                                      onPressed: () {},
                                      child: Text(
                                        "恢复购买",
                                        style: TextStyle(
                                          fontSize: 14.px,
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      case Status.ERROR:
        return Center(
          child: Text('暂时无法获取数据，请稍候再试！${apiResponse.message}'),
        );
      case Status.INITIAL:
      default:
        return const Center(
          child: Text('正在获取数据....'),
        );
    }
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {}

  @override
  void dispose() {
    PaymentService.instance.dispose();
    super.dispose();
  }

  void _renderInApps() async {
    List<IAPItem> items = await PaymentService.instance.products;
    for (IAPItem item in items) {
      _productWidgets.add(Text(item.title!));
    }
    setState(() {});
  }
}