import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tangheem/app_state/app_state.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
import 'package:tangheem/ui/screens/bookmark_screen.dart';
import 'package:tangheem/ui/screens/login_screen.dart';
import 'package:tangheem/ui/screens/user_profile_screen.dart';

class AppMenuDialog extends StatelessWidget {
  final VoidCallback onTap;
  final Function(int) goToIndex;
  final VoidCallback onFontIncrease;
  final VoidCallback onFontDecrease;

  AppMenuDialog({Key key, this.onTap, this.goToIndex, this.onFontIncrease, this.onFontDecrease}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
      child: Dialog(
        insetPadding: EdgeInsets.symmetric(horizontal: 60.0, vertical: 24.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        elevation: 0,
        backgroundColor: Colors.transparent,
        child: Container(
          width: MediaQuery.of(context).size.width * 245 / 375,
          padding: EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(.91),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              58.height,
              menuItem("الرئيسية", "assets/icons/new/home.svg", 0),
              Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
              menuItem("عن الموسوعة", "assets/icons/new/intro.svg", 1),
              Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
              menuItem("اللجنة الإشرافية", "assets/icons/new/members.svg", 4),
              Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
              menuItem("قراءة القرآن الكريم", "assets/icons/new/quran.svg", 2),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  menuOptions("assets/icons/new/bookmark.svg").onPress(() {
                    Navigator.pop(context);
                    Navigator.pushNamed(context, BookmarkScreen.routeName);
                  }),
                  14.width,
                  menuOptions("assets/icons/new/zoom_in.svg").onPress(onFontIncrease),
                  14.width,
                  menuOptions("assets/icons/new/zoom_out.svg").onPress(onFontDecrease),
                  14.width,
                  menuOptions("assets/icons/new/user_acount.svg").onPress(() {
                    Navigator.pop(context);
                    if (AppState().isUserLogin) {
                      Navigator.pushNamed(context, UserProfileScreen.routeName);
                    } else
                      Navigator.pushNamed(context, LoginScreen.routeName);
                  }),
                ],
              ).paddingOnly(top: 32, bottom: 32),
              Container(
                height: 26,
                padding: EdgeInsets.only(right: 16, left: 12),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(32.0),
                  color: ColorConsts.brownLightColor,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Icon(Icons.play_arrow_outlined, size: 20, color: Colors.white),
                    "تصفح وتحميل الموسوعة".toText(13),
                  ],
                ),
              ).onPress(() {
                goToIndex(5);
              })
            ],
          ),
        ),
      ),
    );
  }

  Widget menuOptions(String icon) {
    return SvgPicture.asset(
      icon,
      width: 25,
      height: 25,
      color: ColorConsts.greyBAColor,
    );
  }

  Widget menuItem(String title, String icon, int index) {
    return Column(
      children: [
        SvgPicture.asset(
          icon,
          width: 25,
          height: 25,
          color: ColorConsts.darkText,
        ),
        6.height,
        title.toText(13, color: ColorConsts.darkText)
      ],
    ).onPress(() => goToIndex(index));
  }
}