import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:lottie/lottie.dart';
import 'package:sisca/presentation/peserta/bloc/jenis_bloc.dart';
import 'package:sisca/presentation/peserta/data/model/argument_jenis.dart';
import 'package:sisca/presentation/peserta/ui/widget/button_submit.dart';
import 'package:sisca/presentation/peserta/ui/widget/card_peserta.dart';
import 'package:sisca/presentation/peserta/ui/widget/textfield_search.dart';

import '../../../config/theme/light_colors.dart';
import '../../error/error_screen.dart';
import '../../scan/ui/widget/button_scan.dart';
import '../bloc/peserta_bloc.dart';
import '../data/model/peserta_model.dart';

class PesertaPage extends StatefulWidget {
  final String id, jenis, status;
  const PesertaPage(
      {Key? key, required this.jenis, required this.status, required this.id})
      : super(key: key);

  @override
  State<PesertaPage> createState() => _PesertaPageState();
}

class _PesertaPageState extends State<PesertaPage> {
  late List<DaftarPeserta> _pesertaList = [];
  late List<DDLJenis> _jenisList = [];
  late List<DDLStatus> _ststusList = [];
  late List<DaftarPeserta> _searchResult = [];
  late TextEditingController textController = TextEditingController();
  int selectedIdjenis = 0;
  int selectedIdStatus = 0;
  String selectedJenis = "";
  String selectedStatus = "";
  String _title = "";
  String _tempat = "";
  int _jumlahHadir = 0;
  int _pesertaHadir = 0;
  int _pesertaKonsumsi = 0;

  @override
  void initState() {
    BlocProvider.of<JenisBloc>(context).add(JenisSendData(widget.id));
    BlocProvider.of<PesertaBloc>(context)
        .add(PesertaSendData(widget.jenis, '', widget.id));
    super.initState();
  }

  String combineChoices() {
    return "$selectedJenis $selectedStatus";
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Daftar Undangan",
          style: TextStyle(color: Colors.redAccent),
        ),
        elevation: 0.0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.red),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: SafeArea(
          child: BlocConsumer<PesertaBloc, PesertaState>(
        builder: (context, state) {
          if (state is PesertaLoad) {
            if (state.data.isNotEmpty) {
              for (var i = 0; i < state.data.length; i++) {
                _pesertaList = state.data[i].daftarPeserta!;
                _jenisList = state.data[i].ddlJenis!;
                _ststusList = state.data[i].ddlStatus!;
                _title = state.data[i].event!.title!;
                _tempat = state.data[i].event!.tempat!;
                _jumlahHadir = state.data[i].event!.jumlah_preserta!.peserta!;
                _pesertaHadir =
                    state.data[i].event!.jumlah_preserta!.peserta_hadir!;
                _pesertaKonsumsi =
                    state.data[i].event!.jumlah_preserta!.peserta_konsumsi!;
              }
            } else {
              return Center(
                child: Container(
                  margin: const EdgeInsets.symmetric(vertical: 50),
                  child: const Text(
                    "Peserta kosong",
                    style: TextStyle(
                      color: Colors.black45,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              );
            }
          } else if (state is PesertaLoading) {
            return Center(
                child: Container(
              margin: const EdgeInsets.symmetric(vertical: 50),
              child: Container(
                width: 175,
                height: 175,
                child: Lottie.asset('assets/lottie/animated_loading.json'),
              ),
            ));
          } else if (state is ErrorPeserta) {
            return ErrorScreenBuilder(errorMessage: state.errorMessage);
          }

          return buildInitialLayout(size);
        },
        listener: (context, state) {},
      )),
    );
  }

  Widget buildInitialLayout(Size size) => Column(
        children: [
          Expanded(
            child: ListView(children: [
              /// filed pencarian
              Row(
                children: [
                  TextFieldSearch(
                    size: size,
                    textController: textController,
                    hintText: 'Cari nama undangan',
                    icoton: textController.text.isEmpty
                        ? IconButton(
                            onPressed: () {},
                            icon: const Icon(
                              FontAwesomeIcons.search,
                              color: Colors.black54,
                            ))
                        : IconButton(
                            onPressed: () {
                              textController.clear();
                              setState(() {
                                _searchResult = _pesertaList;
                              });
                            },
                            icon: const Icon(
                              FontAwesomeIcons.close,
                              color: Colors.black54,
                            )),
                    onChangedText: onSearchTextChanged,
                  ),
                ],
              ),

              /// Filter kehadiran
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    _chipJenis(),
                    _chipStatus(),
                  ],
                ),
              ),

              Text("data ${combineChoices()}"),

              /// Daftar Peserta
              _pesertaListView()
            ]),
          ),
          Container(
            width: double.infinity,
            decoration: const BoxDecoration(
              color: Color(0xFF00FFFFFF),
            ),
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: size.width * 0.4,
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(12)),
                      color: LightColors.kGreenY,
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(10),
                      child: InkWell(
                        child: Text(
                          "$_pesertaHadir Peserta",
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                            fontSize: 14.0,
                            color: LightColors.kGreen,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        onTap: () {
                          _showModalBottom(size);
                        },
                      ),
                    ),
                  ),
                  ButtonScan(
                    size: size,
                    press: () {
                      Navigator.pushNamed(context, '/scan',
                          arguments: JenisArgument(_jenisList[0].idJenis));
                    },
                  )
                ],
              ),
            ),
          )
        ],
      );

  /// Daftar Peserta
  Widget _pesertaListView() {
    return _searchResult.isNotEmpty
        ? ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: _searchResult.length,
            itemBuilder: (context, index) {
              return _pesertaListItems(_searchResult[index]);
            },
          )
        : ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: _pesertaList.length,
            itemBuilder: (context, index) {
              return _pesertaListItems(_pesertaList[index]);
            },
          );
  }

  Widget _pesertaListItems(DaftarPeserta pesertaList) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: CardPeserta(
        nama: pesertaList.nama!,
        no_identitas: pesertaList.no_identitas!,
        unit_kerja: pesertaList.unit_kerja!,
        sub_unit_kerja: pesertaList.sub_unit_kerja!,
        data_presensi: pesertaList.data_presensi!.hadir!,
      ),
    );
  }

  /// Show Modal Bottomsheet
  _showModalBottom(Size size) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              margin: const EdgeInsets.fromLTRB(10, 20, 10, 10),
              child: Text(
                _title,
                textAlign: TextAlign.justify,
                style:
                    const TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
              child: Text(
                _tempat,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style:
                    const TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              width: size.width * 0.4,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(12)),
                color: LightColors.kLightYellow,
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Text(
                  "$_jumlahHadir Peserta",
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    fontSize: 15.0,
                    color: LightColors.kDarkYellow,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              width: size.width * 0.4,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(12)),
                color: LightColors.kGreenY,
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Text(
                  "$_pesertaHadir Peserta",
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    fontSize: 15.0,
                    color: LightColors.kGreen,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              width: size.width * 0.4,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(12)),
                color: LightColors.kBlue,
              ),
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Text(
                  "$_pesertaKonsumsi Peserta",
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    fontSize: 15.0,
                    color: LightColors.kDarkBlue,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            Center(
              child: ButtonSubmit(
                size: size,
                nameButton: 'Tutup',
                press: () {
                  Navigator.of(context).pop();
                },
              ),
            ),
          ],
        );
      },
    );
  }

  /// onChanged Text
  onSearchTextChanged(String text) {
    List<DaftarPeserta> _results = <DaftarPeserta>[];
    if (text.isEmpty) {
      _results = _pesertaList;
    } else {
      _results = _pesertaList
          .where((peserta) =>
              peserta.nama!.toLowerCase().contains(text.toLowerCase()))
          .toList();
    }

    setState(() {
      _searchResult = _results;
    });
    return;
  }

  ///ddl jenis
  Widget _chipJenis() {
    return Container(
      margin: EdgeInsets.fromLTRB(10, 10, 0, 10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Wrap(
            spacing: 8.0,
            children: _jenisList.asMap().entries.map((e) {
              final index = e.key;
              final option = e.value;
              return ChoiceChip(
                label: Text(option.jenis_qrcode!),
                selected: selectedIdjenis == index,
                selectedColor: Colors.redAccent,
                onSelected: (isSelected) {
                  setState(() {
                    if (isSelected) {
                      selectedIdjenis = index;
                      selectedJenis = option.jenis_qrcode!;
                    }
                  });
                },
                labelStyle: TextStyle(
                    color:
                        selectedIdjenis == index ? Colors.white : Colors.black),
              );
            }).toList(),
          )
        ],
      ),
    );
  }

  ///ddl status
  Widget _chipStatus() {
    return Container(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Wrap(
            spacing: 8.0,
            children: _ststusList.asMap().entries.map((e) {
              final index = e.key;
              final option = e.value;
              return ChoiceChip(
                label: Text(option.status!),
                selected: selectedIdStatus == index,
                selectedColor: Colors.redAccent,
                onSelected: (isSelected) {
                  setState(() {
                    if (isSelected) {
                      selectedIdStatus = index;
                      selectedStatus = option.status!;
                    }
                  });
                },
                labelStyle: TextStyle(
                    color: selectedIdStatus == index
                        ? Colors.white
                        : Colors.black),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}