import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:skywood/global/client/user_client.dart';
import 'package:skywood/global/request/api_const.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/pages/mine/page/about_us_page.dart';
import 'package:skywood/pages/mine/page/mine_collection_page.dart';
import 'package:skywood/pages/mine/page/sky_web_page.dart';
import 'package:skywood/pages/mine/widget/mine_section_view.dart';
import 'package:skywood/pages/widgets/pixel_widgets.dart';
import 'package:skywood/utils/models/user/skywood_user.dart';
import 'package:skywood/utils/tools/app_toast.dart';
import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';

import '../widgets/common_bg_page.dart';

class MinePage extends StatefulWidget {
  const MinePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MainRootState();
  }
}

class _MainRootState extends State<MinePage> {

  SkywoodUser? _userInfo;

  List<Widget> _buildSections() {
    final menuData = [
      {
        'title': 'Collection', 'img': ConstImg.collection,
        'action': () {
          HelpNav.to(MineCollectionPage());
        }
      },
      {
        'title': 'Privacy Policy', 'img': ConstImg.minePp,
        'action': () {
          HelpNav.to(SkyWebPage(params: WebLinkParams(
            title: 'Privacy Policy',
            urlString: ApiConst.webPrivacy,
          )));
        }
      },
      {
        'title': 'User Agreement', 'img': ConstImg.mineUa,
        'action': () {
          HelpNav.to(SkyWebPage(params: WebLinkParams(
            title: 'User Agreement',
            urlString: ApiConst.webAgreement,
          )));
        }
      },
      {
        'title': 'About us', 'img': ConstImg.mineAb,
        'action': () {
          HelpNav.to(AboutUsPage());
        }
      }
    ];
    return menuData.map((ele) => _buildMenuItem(
      ele['title'] as String,
      imgName: ele['img'] as String,
      onTap: ele['action'] as void Function(),
    )).toList();
  }

  @override
  void initState() {
    super.initState();

    _getUserData();
  }

  void _getUserData() {
    UserClient.getUserInfo().then((value) {
      setState(() {
        _userInfo = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return CommonBgPage(
      child: SafeArea(
          bottom: false,
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              children: [
                const SizedBox(height: 5),
                mImgBg(imgName: ConstImg.mineTop),
                const SizedBox(height: 10),
                MineSectionView(title: 'PLAYER CARD', imgName: ConstImg.sectionBg2, paddingSpace: 16,
                  child: _userInfo==null ? null : _showUserInfo(),
                ),
                const SizedBox(height: 6),
                MineSectionView(title: 'GAME MENU', imgName: ConstImg.sectionBg1,
                  paddingSpace: 10,
                  child: SizedBox(
                    height: 200,
                    child: GridView.builder(
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 4,
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                        childAspectRatio: 1.0,
                      ),
                      itemBuilder: (context, index) => _buildSections()[index],
                      itemCount: _buildSections().length,
                    ),
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }

  Widget _showUserInfo() {
    String _name = _userInfo!.givingName!.isEmpty || _userInfo!.givingName==''
        ? 'Visitor'
        : _userInfo!.givingName!;
    return Column(
      children: [
        Row(
          children: [
            _userInfo!.avator.isEmpty || _userInfo!.avator==''
                ? HelpImg.asset(ConstImg.defAvatar, width: 60)
                : HelpImg.asset(ConstImg.defAvatar),
            const SizedBox(width: 10),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 5),
                SkyText(text: _name, fontSize: 18, fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
                const SizedBox(height: 15),
                Row(
                  children: [
                    SkyText(text: _userInfo!.customerId,
                      fontSize: 10,
                      color: Colors.white.withAlpha(200),
                    ),
                    const SizedBox(width: 6),
                    HelpImg.asset(ConstImg.copy, width: 12),
                  ],
                ).addInkWell(onTap: () async {
                  // copy
                  if (_userInfo!.customerId.isEmpty) return;
                  await Clipboard.setData(ClipboardData(text: _userInfo!.customerId));
                  AppToast.showSuccess('ID is Copied!');
                }),
                const SizedBox(height: 10),
              ],
            )
          ],
        )
      ],
    );
  }

  Widget _buildMenuItem(String title, {required String imgName, Function()? onTap}) {
    double _w = (AppScreen.screenWidth - 30 - 10) / 4 - 10;
    return Stack(
      children: [
        HelpImg.asset(ConstImg.mineBtnBg, width: _w, fit: BoxFit.fill),
        Positioned(
          left: 5, top: 5, right: 5,
          child: Column(
            children: [
              HelpImg.asset(imgName, width: _w/2.0),
              const SizedBox(height: 2),
              SkyText(text: title, fontSize: 9.w, color: Colors.white,
                maxLines: 2,
                textAlign: TextAlign.center,
              )
            ],
          ),
        )
      ],
    ).addInkWell(onTap: onTap);
  }
}