import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:tangheem/api/tangheem_user_api_client.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/models/member_model.dart';
import 'package:tangheem/ui/misc/no_data_ui.dart';

class MemberScreen extends StatefulWidget {
  static const String routeName = "/members";

  MemberScreen({Key key}) : super(key: key);

  @override
  _MemberScreenState createState() => _MemberScreenState();
}

class _MemberScreenState extends State<MemberScreen> {
  List<MemberDataModel> membersList;

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

  void getMembers() async {
    Utils.showLoading(context);
    try {
      var membersData = await TangheemUserApiClient().getMembers();
      membersList = membersData?.data ?? [];
      membersList.sort((a, b) => a.orderNo.compareTo(b.orderNo));
    } catch (ex) {
      membersList = [];
      if (mounted) Utils.handleException(ex, null);
    } finally {
      Utils.hideLoading(context);
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return membersList == null
        ? SizedBox()
        : membersList.isEmpty
            ? NoDataUI()
            : ListView(
                physics: BouncingScrollPhysics(),
                padding: EdgeInsets.all(16),
                children: [
                  Text(
                    "أعضاء اللجنة الإشرافية",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
                  ),
                  SizedBox(height: 12),
                  ListView.separated(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: membersList.length,
                    separatorBuilder: (context, index) {
                      return SizedBox(height: 8);
                    },
                    itemBuilder: (context, index) {
                      String encodedImage = membersList.elementAt(index).picture;
                      if (encodedImage.contains("data:image/png;base64,")) {
                        encodedImage = encodedImage.replaceAll("data:image/png;base64,", "");
                      }
                      if (encodedImage.contains("data:image/jpeg;base64,")) {
                        encodedImage = encodedImage.replaceAll("data:image/jpeg;base64,", "");
                      }
                      var temp = base64Decode(encodedImage);

                      return ListTile(
                        tileColor: Colors.white,
                        leading: Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            image: membersList.length < 1
                                ? null
                                : DecorationImage(
                                    fit: BoxFit.cover,
                                    image: MemoryImage(temp),
                                  ),
                            borderRadius: BorderRadius.all(
                              Radius.circular(30.0),
                            ),
                          ),
                          child: membersList.length < 1
                              ? ClipRRect(
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(30.0),
                                  ),
                                  child: SvgPicture.asset(
                                    "assets/icons/chat_user.svg",
                                    clipBehavior: Clip.antiAlias,
                                  ),
                                )
                              : null,
                        ),
                        title: Text(
                          membersList[index].firstName + " " + membersList[index].lastName,
                          style: TextStyle(fontSize: 14, color: ColorConsts.primaryBlue, fontWeight: FontWeight.w600),
                        ),
                        subtitle: Text(
                          " ${membersList[index].description.trim()}",
                          style: TextStyle(fontSize: 12, color: ColorConsts.primaryBlue),
                        ),
                        isThreeLine: true,
                      );
                    },
                  ),
                ],
              );
  }
}