import 'dart:ui' as ui;

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:aslan/chatvibe_ui/components/at_compontent.dart';
import 'package:provider/provider.dart';
import 'package:aslan/chatvibe_managers/app_general_manager.dart';
import 'package:aslan/chatvibe_ui/widgets/room/emoji/emoji_tab_page.dart';

class RoomEmojiPage extends StatefulWidget {
  @override
  _RoomEmojiPageState createState() => _RoomEmojiPageState();
}

class _RoomEmojiPageState extends State<RoomEmojiPage>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;
  final List<Widget> _pages = [];
  final List<Widget> _tabs = [];

  @override
  void initState() {
    super.initState();
    Provider.of<AppGeneralManager>(context, listen: false).emojiAll();
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Consumer<AppGeneralManager>(
        builder: (context, ref, child) {
          if (ref.emojiByTab.isNotEmpty) {
            _tabs.clear();
            _pages.clear();
            for (var value in ref.emojiByTab.keys) {
              _tabs.add(Tab(text: value));
              _pages.add(EmojiTabPage(value));
            }
            _tabController ??= TabController(
              length: _pages.length,
              vsync: this,
            );
          }
          return ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12.0),
                topRight: Radius.circular(12.0),
              ),
            child: BackdropFilter(
              filter: ui.ImageFilter.blur(sigmaX: 15, sigmaY: 15),
              child: Material(
                color: Colors.black54,
                child: SizedBox(
                  height: 235.w,
                  child:
                      ref.emojiByTab.isNotEmpty
                          ? Column(
                            children: [
                              SizedBox(height: 12.w),
                              Row(
                                children: [
                                  SizedBox(width: 5.w),
                                  TabBar(
                                    tabAlignment: TabAlignment.start,
                                    labelPadding: EdgeInsets.symmetric(
                                      horizontal: 12.w,
                                    ),
                                    labelColor: Colors.white,
                                    isScrollable: true,
                                    indicator: BoxDecoration(),
                                    unselectedLabelColor: Colors.white54,
                                    labelStyle: TextStyle(
                                      fontSize: 15.sp,
                                      fontWeight: FontWeight.bold,
                                    ),
                                    unselectedLabelStyle: TextStyle(
                                      fontSize: 13.sp,
                                    ),
                                    indicatorColor: Colors.transparent,
                                    dividerColor: Colors.transparent,
                                    controller: _tabController,
                                    tabs: _tabs,
                                  ),
                                ],
                              ),
                              Expanded(
                                child: TabBarView(
                                  controller: _tabController,
                                  children: _pages,
                                ),
                              ),
                            ],
                          )
                          : mainEmpty(),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}