import 'package:btn_survey/src/core/constants/app_constants.dart';
import 'package:btn_survey/src/core/models/service_monitoring_log.dart';
import 'package:btn_survey/src/core/utils/debouncer.dart';
import 'package:btn_survey/src/core/utils/format_date_time.dart';
import 'package:btn_survey/src/core/utils/size_config.dart';
import 'package:btn_survey/src/core/viewmodels/service_monitoring/service_monitoring_log_model.dart';
import 'package:btn_survey/src/ui/shared/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../base_widget.dart';

class LogPenilaianSeeAll extends StatefulWidget {
  @override
  _LogPenilaianSeeAllState createState() => _LogPenilaianSeeAllState();
}

class _LogPenilaianSeeAllState extends State<LogPenilaianSeeAll> {
  final _debouncer = Debouncer(milliseconds: 500);
  List<ServiceMonitoringLogData> logList = List();
  List<ServiceMonitoringLogData> filteredLogList = List();
  int first = 0;
  // String selectStatus = "";
  // List<DropdownMenuItem<String>> _dropdownFilterStatus;

  // @override
  // void initState() {
  //   _dropdownFilterStatus = buildDropdownFilterYear();
  //   selectStatus = _dropdownFilterStatus[0].value;
  //   super.initState();
  // }

  // List<DropdownMenuItem<String>> buildDropdownFilterYear() {
  //   var statusList = [
  //     'Pending',
  //     'Rejected',
  //     'Approved'
  //   ];

  //   List<DropdownMenuItem<String>> statuss = List();
  //   for (String status in statusList) {
  //     statuss.add(DropdownMenuItem(
  //       value: status,
  //       child: Text(status),
  //     ));
  //   }

  //   return statuss;
  // }

  // void onChangeFilterStatus(String selectStatus) {
  //   setState(() {
  //     this.selectStatus = selectStatus;
  //     print('naon ie $selectStatus');
  //   });
  // }

  StatusFilter selectedFilter;
  List<StatusFilter> statuss = <StatusFilter>[
    StatusFilter("Pending"," 1"),
    StatusFilter("Approved", "2"),
    StatusFilter("Rejected", "3")
  ];

  @override
  void iniState() {
    selectedFilter = statuss[index];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('Build Apa Engga $statuss');
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Log Penilaian',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: Color(0xff5F5F5F),
          ),
        ),
        iconTheme: IconThemeData(
          color: Color(0xff5F5F5F),
        ),
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        centerTitle: true,
      ),
      body: BaseWidget<ServiceMonitoringLogFilterModel>(
        model: ServiceMonitoringLogFilterModel(api: Provider.of(context)),
        onModelReady: (model) =>
            model.getServiceMonitoringLog(selectedFilter.num),
        builder: (context, model, child) {
          if (model.busy) {
            return Container(
              margin: EdgeInsets.symmetric(vertical: 20),
              child: Center(
                child: CircularProgressIndicator(),
              ),
            );
          } else {
            if (first == 0) filteredLogList = model.serviceMonitoringLog.data;
            first++;

            return SingleChildScrollView(
              physics: BouncingScrollPhysics(),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(
                            top: 20,
                            bottom: 10,
                            left: 20,
                            right: 20,
                          ),
                          child: searchField(model.serviceMonitoringLog.data),
                        ),
                      ),
                      DropdownButton(
                        value: selectedFilter,
                        items: statuss.map((StatusFilter status) {
                          return DropdownMenuItem(
                            value: status,
                            child: Text(status.name),
                          );
                        }).toList(),
                        onChanged: (StatusFilter value) async {
                          selectedFilter = value;
                          await model
                              .getServiceMonitoringLog(selectedFilter.num);
                        },
                        // value: selectStatus,
                        // items: _dropdownFilterStatus,
                        // onChanged: (s) async {
                        //   this.selectStatus = s;
                        //   await model.getServiceMonitoringLog();
                        // },
                      )
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: filteredLogList.length,
                      itemBuilder: (BuildContext context, int index) {
                        // New code:
                        return Container(
                          margin: EdgeInsets.only(top: 4, bottom: 4),
                          child: listItemLogPenilaian(filteredLogList[index]),
                        );
                      },
                    ),
                  ),
                ],
              ),
            );
          }
        },
      ),
    );
  }

  Widget searchField(List<ServiceMonitoringLogData> list) {
    return new TextField(
      keyboardType: TextInputType.text,
      autofocus: false,
      cursorColor: primaryColor,
      style: TextStyle(color: Colors.black),
      decoration: InputDecoration(
        suffixIcon: Icon(Icons.search),
        hintText: 'Cari Log Penilaian',
        hintStyle: TextStyle(color: Colors.black.withOpacity(0.3)),
        filled: true,
        fillColor: Color(0xFFF2F2F2),
        contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(style: BorderStyle.none)),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(
            style: BorderStyle.none,
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(
            style: BorderStyle.none,
          ),
        ),
      ),
      onChanged: (String value) {
        _debouncer.run(() {
          setState(() {
            filteredLogList = list
                .where(
                    (f) => (f.name.toLowerCase().contains(value.toLowerCase())))
                .toList();
          });
          print("SEARCH KEYWORD ${value.toLowerCase()}");
        });
      },
    );
  }

  Widget listItemLogPenilaian(ServiceMonitoringLogData logPenilaian) {
    return Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      elevation: 2,
      child: InkWell(
        onTap: () {
          if (logPenilaian.status == 1) {
            Navigator.of(context).pushNamed(RoutePaths.InputFormsOpOne,
                arguments:
                    "${logPenilaian.id.toString()},${logPenilaian.status}");
            print(logPenilaian.status);
          } else if (logPenilaian.status == 0) {
            Navigator.of(context).pushNamed(RoutePaths.InputFormsOpOne,
                arguments:
                    "${logPenilaian.id.toString()},${logPenilaian.status}");
          } else if (logPenilaian.status == 2) {
            Navigator.of(context).pushNamed(RoutePaths.InputFormsOpOne,
                arguments:
                    "${logPenilaian.id.toString()},${logPenilaian.status}");
          }
        },
        child: Padding(
          padding: const EdgeInsets.all(12),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      logPenilaian.name,
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(
                      height: 6,
                    ),
                    Row(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(right: 4),
                          child: Icon(
                            Icons.date_range,
                            color: Color(0xFFDADADA),
                          ),
                        ),
                        Text(
                          getFormattedDateFromIsoTypeB(logPenilaian.updatedAt),
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.black.withOpacity(0.3),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 16,
              ),
              getLogResult(logPenilaian),
              SizedBox(
                width: 16,
              ),
              getLogIcon(logPenilaian.status),
            ],
          ),
        ),
      ),
    );
  }

  Widget getLogIcon(int status) {
    switch (status) {
      case 0:
        {
          return Image.asset(
            'res/images/ic_wait_orange.png',
            width: SizeConfig.blockSizeHorizontal * 8,
          );
        }
        break;
      case 1:
        {
          return Image.asset(
            'res/images/ic_cross_red.png',
            width: SizeConfig.blockSizeHorizontal * 8,
          );
        }
        break;
      case 2:
        {
          return Image.asset(
            'res/images/ic_check_green.png',
            width: SizeConfig.blockSizeHorizontal * 8,
          );
        }
    }
    return Container();
  }

  Widget getLogResult(ServiceMonitoringLogData log) {
    switch (log.status) {
      case 0:
        {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Pending',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: orange,
                ),
              ),
              SizedBox(
                height: 6,
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 4),
                    child: Icon(
                      Icons.date_range,
                      color: Color(0xFFDADADA),
                    ),
                  ),
                  Text(
                    getFormattedDateFromIsoTypeB(log.updatedAt),
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.black.withOpacity(0.3),
                    ),
                  ),
                ],
              ),
            ],
          );
        }
        break;
      case 2:
        {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Approved',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: Color(0xFF42B20D),
                ),
              ),
              SizedBox(
                height: 6,
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 4),
                    child: Icon(
                      Icons.date_range,
                      color: Color(0xFFDADADA),
                    ),
                  ),
                  Text(
                    getFormattedDateFromIsoTypeB(log.updatedAt),
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.black.withOpacity(0.3),
                    ),
                  ),
                ],
              ),
            ],
          );
        }
        break;
      case 1:
        {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Rejected',
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: Color(0xFFE03238),
                ),
              ),
              SizedBox(
                height: 6,
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 4),
                    child: Icon(
                      Icons.date_range,
                      color: Color(0xFFDADADA),
                    ),
                  ),
                  Text(
                    getFormattedDateFromIsoTypeB(log.updatedAt),
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.black.withOpacity(0.3),
                    ),
                  ),
                ],
              ),
            ],
          );
        }
        break;
    }
    return Container();
  }
}

class StatusFilter {
  final String name;
  final String num;

  StatusFilter(this.name, this.num);
}