import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:one_poem/res/resources.dart';
import 'package:one_poem/routers/fluro_navigator.dart';
import 'package:one_poem/extension/int_extension.dart';
import 'package:one_poem/util/toast_utils.dart';

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

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

class _MembershipPageState extends State<MembershipPage>
    with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Container(
          alignment: Alignment.topCenter,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/membership/membership_bg.png"),
              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(
                              "成为一言会员，将可以享受会员专属临境体验。",
                              style: TextStyle(
                                fontSize: 18.px,
                                color: Colors.white,
                              ),
                            ),
                            Gaps.vGap24,
                            // TODO 如果会员则显示会员详情
                            Expanded(
                              child: ListView.builder(
                                itemExtent: 48.0,
                                itemBuilder: (_, index) {
                                  return _buildItem(index);
                                },
                                itemCount: 5,
                              ),
                            ),
                            Gaps.vGap24,
                            Text(
                              "遇到任何问题，请在微信中关注“一言临境”公众号",
                              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,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildItem(int index) {
    return Flex(
      direction: Axis.horizontal,
      children: [
        const Text(
          "一个月",
          style: TextStyle(
            color: Colors.white,
            fontSize: 15.0,
          ),
        ),
        Gaps.hGap10,
        const Expanded(
          flex: 1,
          child: Align(
            alignment: Alignment.centerRight,
            child: Text(
              "99￥",
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
              ),
            ),
          ),
        ),
        Gaps.hGap32,
        ElevatedButton(
          child: const Text(
            "开通",
            style: TextStyle(color: Colors.white, fontSize: 15.0),
          ),
          onPressed: () {
            Toast.show("开通啦！");
          },
        ),
      ],
    );
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {}

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