import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:novyronst/common/help/help_image.dart';
import 'package:novyronst/pages/collect/pages/collection_page.dart';
import 'package:novyronst/pages/first/pages/first_page.dart';
import 'package:novyronst/pages/my/pages/my_page.dart';
import 'package:novyronst/pages/play/pages/play_page.dart';
import 'package:novyronst/root/lib_export.dart';
import 'package:novyronst/tools/widgets/extend_widget.dart';
import 'package:novyronst/tools/widgets/novy_com_widget.dart';
import 'package:novyronst/tools/widgets/novy_keep_alive.dart';

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

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

class _RootPageState extends State<RootPage> {

  final _pageController = PageController();
  final List<Widget> _pages = [
    NovyKeepAlive(child: FirstPage()),
    NovyKeepAlive(child: PlayPage()),
    CollectionPage(),
    NovyKeepAlive(child: MyPage()),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            physics: const NeverScrollableScrollPhysics(),
            controller: _pageController,
            children: _pages,
          ),
          Positioned(
            left: 0, right: 0, bottom: 0,
            child: SafeArea(
              top: false,
              child: AppBottomView(
                onSelectedIndex: (index) {
                  _pageController.jumpToPage(index);
                },
              ),
            ),
          )
        ],
      )
    );
  }
}

/// 底部tabbar
class AppBottomView extends StatefulWidget {
  const AppBottomView({super.key,
    required this.onSelectedIndex,
  });

  final Function(int) onSelectedIndex;

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

class _AppBottomViewState extends State<AppBottomView> {

  final List<String> _unselectedIcons = [
    ConstImage.btHomeUnsel, ConstImage.btPlayUnsel,
    ConstImage.btCollectUnsel, ConstImage.btMineUnsel
  ];
  final List<String> _selectedIcons = [
    ConstImage.btHomeSel, ConstImage.btPlaySel,
    ConstImage.btCollectSel, ConstImage.btMineSel
  ];
  final List<String> _titles = ['Home', 'Play', 'Collect', 'Me'];
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    const double _height = 65;
    return Container(
      height: _height,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Stack(
        children: [
          Opacity(opacity: 0.9,
            child: ImageFiltered(imageFilter: ImageFilter.blur(sigmaX: 1),
              child: HelpImage.asset(ConstImage.appBottom,
                width: AppScreen.screenWidth-32, height: _height,
                fit: BoxFit.fill,
              ),
            ),
          ),

          Positioned.fill(
            child: Padding(padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: List.generate(_unselectedIcons.length, (index) {
                  return _buildTabItem(_titles[index], index, onTap: () {
                    setState(() {
                      _currentIndex = index;
                    });
                    widget.onSelectedIndex(index);

                  });
                }),
              ),
            ),
          )
        ],
      ),
    );
  }

  _aaaa(){

    return ClipRRect(
      borderRadius: BorderRadius.circular(12),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: Container(
          color: Colors.white.withOpacity(0.1),
          child: const Center(
            child: Text(
              '毛玻璃效果',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildTabItem(String title, int index, {required Function() onTap}) {
    String icon = _currentIndex == index ? _selectedIcons[index] : _unselectedIcons[index];
    Color tcolor = _currentIndex == index ? ConstColor.btGreen : ConstColor.btWhite;
    return Container(
      padding:  const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
      width: 60, height: 70,
      child: Column(
        children: [
          HelpImage.asset(icon, width: 32, height: 32),
          const SizedBox(height: 2),
          NovyText(title, fontSize: 11,
            color: tcolor,
          )
        ],
      )
    ).addInkWell(onTap: onTap);
  }
}