import 'package:dating_touchme_app/controller/discover/discover_controller.dart';
import 'package:dating_touchme_app/pages/discover/live_item_widget.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

/// 聚会脱单页面
class PartyPage extends StatefulWidget {
  const PartyPage({super.key});

  @override
  State<PartyPage> createState() => _PartyPageState();
}

class _PartyPageState extends State<PartyPage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
  late final DiscoverController discoverController;
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    if (Get.isRegistered<DiscoverController>()) {
      discoverController = Get.find<DiscoverController>();
    } else {
      discoverController = Get.put(DiscoverController());
    }
    _tabController = TabController(length: 4, vsync: this);
    discoverController.loadRtcChannelPage();
  }

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

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        TDTabBar(
          tabs: [
            TDTab(
              child: Padding(
                padding: EdgeInsets.only(right: 16, left: 16),
                child: Text('全部'),
              ),
            ),
            TDTab(
              child: Padding(
                padding: EdgeInsets.only(right: 16, left: 16),
                child: Text('同城'),
              ),
            ),
            TDTab(
              child: Padding(
                padding: EdgeInsets.only(right: 12, left: 12),
                child: Text('相亲视频'),
              ),
            ),
            TDTab(
              child: Padding(
                padding: EdgeInsets.only(right: 12, left: 12),
                child: Text('相亲语音'),
              ),
            ),
          ],
          backgroundColor: Colors.transparent,
          labelPadding: const EdgeInsets.only(right: 4, top: 10, bottom: 10, left: 4),
          selectedBgColor: const Color.fromRGBO(108, 105, 244, 1),
          unSelectedBgColor: Colors.transparent,
          labelColor: Colors.white,
          dividerHeight: 0,
          tabAlignment: TabAlignment.start,
          outlineType: TDTabBarOutlineType.capsule,
          controller: _tabController,
          showIndicator: false,
          isScrollable: true,
          onTap: (index) {
            print('聚会脱单页面 Tab: $index');
          },
        ),
        Expanded(
          child: Obx(() {
            if (discoverController.isLoading.value &&
                discoverController.rtcChannelList.isEmpty) {
              return Center(
                child: CircularProgressIndicator(
                  color: const Color.fromRGBO(108, 105, 244, 1),
                ),
              );
            }
            if (discoverController.rtcChannelList.isEmpty) {
              return Center(
                child: Text(
                  '暂无直播频道',
                  style: TextStyle(
                    fontSize: 14.w,
                    color: Colors.white.withOpacity(0.7),
                  ),
                ),
              );
            }
            return SingleChildScrollView(
              child: Wrap(
                spacing: 7.w,
                runSpacing: 7.w,
                children: [
                  ...discoverController.rtcChannelList.map((channel) {
                    return LiveItemWidget(
                      channel: channel,
                      channelId: channel.channelId,
                    );
                  }),
                ],
              ),
            );
          }),
        ),
      ],
    );
  }

  @override
  bool get wantKeepAlive => true;
}