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.separated(
                physics: BouncingScrollPhysics(),
                padding: EdgeInsets.all(16),
                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),
                    ),
                    subtitle: Text(
                      " ${membersList[index].description.trim()}",
                      style: TextStyle(fontSize: 12, color: ColorConsts.primaryBlue),
                    ),
                    isThreeLine: true,
                  );
                },
              );
  }
}
