import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/models/bookmark_model.dart';
import 'package:tangheem/models/surah_model.dart';
import 'package:tangheem/ui/misc/no_data_ui.dart';
import 'package:tangheem/ui/screens/quran_screen.dart';

class BookmarkScreen extends StatefulWidget {
  static const String routeName = "/bookmark";
  final String tangheemQuery;
  final String tangheemTypeName;
  final SurahModelData surah;

  BookmarkScreen({Key key, this.surah, this.tangheemQuery, this.tangheemTypeName}) : super(key: key);

  @override
  _BookmarkScreenState createState() {
    return _BookmarkScreenState();
  }
}

class _BookmarkScreenState extends State<BookmarkScreen> {
  List<BookMarkModel> _bookMarkList = [];
  SlidableController _slidableController;

  @override
  void initState() {
    _slidableController = SlidableController(
      onSlideAnimationChanged: handleSlideAnimationChanged,
      onSlideIsOpenChanged: handleSlideIsOpenChanged,
    );
    super.initState();
    getBookMark();
  }

  void handleSlideAnimationChanged(Animation<double> slideAnimation) {}

  void handleSlideIsOpenChanged(bool isOpen) {}

  void getBookMark() async {
    Utils.showLoading(context);
    _bookMarkList = await BookMarkModel.getFromPrefs();
    _bookMarkList = _bookMarkList.reversed.toList();
    Utils.hideLoading(context);
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _bookMarkList.isEmpty
        ? NoDataUI()
        : ListView.separated(
            physics: BouncingScrollPhysics(),
            padding: EdgeInsets.all(16),
            itemCount: _bookMarkList.length,
            separatorBuilder: (context, index) {
              return SizedBox(height: 8);
            },
            itemBuilder: (context, index) {
              return Slidable(
                controller: _slidableController,
                actionPane: SlidableBehindActionPane(),
                secondaryActions: <Widget>[
                  IconSlideAction(
                    color: Colors.redAccent,
                    icon: Icons.delete,
                    closeOnTap: true,
                    onTap: () {
                      _bookMarkList.removeAt(index);
                      BookMarkModel.saveToPrefs(_bookMarkList);
                      Utils.showToast("تم حذف المرجع");
                      setState(() {});
                    },
                  ),
                ],
                child: ListTile(
                  tileColor: Colors.white,
                  contentPadding: EdgeInsets.fromLTRB(12, 8, 12, 8),
                  onTap: () {
                    Navigator.pushNamed(context, QuranScreen.routeName, arguments: _bookMarkList[index]);
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4),
                  ),
                  title: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        _bookMarkList[index].surahNameAR + ":",
                        style: TextStyle(fontSize: 12, color: ColorConsts.primaryBlue),
                      ),
                      Text(
                        " ${_bookMarkList[index].numberInSurah}",
                        style: TextStyle(fontSize: 14, fontFamily: "BArabics", color: ColorConsts.secondaryOrange),
                      ),
                    ],
                  ),
                  subtitle: Text(
                    _bookMarkList[index].reverseAyatNumber(),
                    textAlign: TextAlign.start,
                    style: TextStyle(
                      fontFamily: "UthmanicHafs",
                      fontSize: 16,
                      color: ColorConsts.primaryBlue,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              );
            },
          );
  }
}
