import 'dart:async';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../../beans/category_info_list_bean.dart';
import '../chat/chat_page.dart';
import 'find_model.dart';

class MultiplexPage extends StatefulWidget {
  String id;

  MultiplexPage({super.key, required this.id});

  @override
  State<MultiplexPage> createState() => _MultiplexPageState();
}

class _MultiplexPageState extends State<MultiplexPage> {
  late StreamSubscription subscription;

  final FindModel _viewmodel = FindModel();

  List<CategoryInfoListBean> categoryList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    subscription = _viewmodel.streamController.stream.listen((newData) {
      String code = newData['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "getCategoryInfoList":
            categoryList = newData['data'];
            break;
        }
        setState(() {});
        EasyLoading.dismiss();
      }
    });

    EasyLoading.show(status: "'loading...'");
    _viewmodel.getCategoryInfoList(widget.id);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    subscription.cancel();
    super.dispose();
  }

  goChatPage(String id) {
    Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => ChatPage(
                characterId: id,
              )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top + 25, bottom: 60, left: 16, right: 16),
      child: ListView.builder(
          itemCount: categoryList.length,
          itemBuilder: (BuildContext context, int index) {
            return _item(index, categoryList[index]);
          }),
    );
  }

  _item(index, CategoryInfoListBean data) {
    final size = MediaQuery.of(context).size;
    final w130 = size.width / 2.7692307692307;
    final h50 = size.width / 7.2;
    final b23 = size.width / 15.652173913043;
    final w83 = size.width / 4.3373493975903;
    final h115 = size.width / 3.1304347826086;
    final l101 = size.width / 3.5643564356435;
    final t45 = size.width / 8;
    final w200 = size.width / 1.8;
    final l102 = size.width / 3.5294117647058;
    final h70 = size.width / 5.1428571428571;

    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        goChatPage(data.id.toString());
      },
      child: Container(
        height: w130,
        width: h50,
        margin: EdgeInsets.only(bottom: b23),
        decoration: BoxDecoration(
          color: Color(0xFF202021),
          borderRadius: BorderRadius.all(Radius.circular(7)),
          border: Border.all(color: Color(0xFF7E7E7E), width: 0.3),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              left: 7,
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(15)),
                child: CachedNetworkImage(
                  width: w83,
                  height: h115,
                  fit: BoxFit.cover,
                  imageUrl: data.bgImage!,
                  errorWidget: (context, url, error) => const Icon(Icons.error),
                ),
              ),
            ),
            Positioned(
                left: l101,
                top: 19,
                child: Text(
                  '${data.name}',
                  style: TextStyle(color: Colors.white, fontSize: 14),
                )),
            Positioned(
                left: l101,
                top: t45,
                child: SizedBox(
                  width: w200,
                  height: 16,
                  child: ListView.builder(
                      itemCount: data.label?.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                          alignment: Alignment.center,
                          padding: EdgeInsets.symmetric(horizontal: 11),
                          margin: EdgeInsets.only(right: 5),
                          decoration: BoxDecoration(
                              border: Border.all(color: Color(0xFFFF9000), width: 0.33), borderRadius: BorderRadius.all(Radius.circular(7))),
                          child: Text(
                            '${data.label?[index].name}',
                            style: TextStyle(fontSize: 10, color: Color(0xFFFF9000)),
                          ),
                        );
                      }),
                )),
            Positioned(
                left: l102,
                top: h70,
                child: Container(
                  width: w200,
                  child: Text(
                    maxLines: 3,
                    '${data.biography}',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.white, fontSize: 10),
                  ),
                ))
          ],
        ),
      ),
    );
  }
}