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) {
    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

    Widget _operationButtons = Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        menuOptions("assets/icons/new/bookmark.svg", isPortrait).onPress(() {
          Navigator.pop(context);
          Navigator.pushNamed(context, BookmarkScreen.routeName);
        }),
        14.width,
        menuOptions("assets/icons/new/zoom_in.svg", isPortrait).onPress(onFontIncrease),
        14.width,
        menuOptions("assets/icons/new/zoom_out.svg", isPortrait).onPress(onFontDecrease),
        14.width,
        menuOptions("assets/icons/new/user_acount.svg", isPortrait).onPress(() {
          Navigator.pop(context);
          if (AppState().isUserLogin) {
            Navigator.pushNamed(context, UserProfileScreen.routeName);
          } else
            Navigator.pushNamed(context, LoginScreen.routeName);
        }),
      ],
    );

    Widget _pdfButton = 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(isPortrait ? 13 : 16),
        ],
      ),
    ).onPress(() {
      goToIndex(5);
    });

    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,
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(.91),
            borderRadius: BorderRadius.circular(20),
          ),
          child: isPortrait
              ? SingleChildScrollView(
                  padding: EdgeInsets.all(12),
                  physics: BouncingScrollPhysics(),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      isPortrait ? 58.height : 24.height,
                      menuItem("الرئيسية", "assets/icons/new/home.svg", 0, isPortrait),
                      Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
                      menuItem("عن الموسوعة", "assets/icons/new/intro.svg", 1, isPortrait),
                      Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
                      menuItem("اللجنة الإشرافية", "assets/icons/new/members.svg", 4, isPortrait),
                      Container(width: 50, height: 1, color: ColorConsts.greyB5Color).paddingOnly(top: 16, bottom: 16),
                      menuItem("قراءة القرآن الكريم", "assets/icons/new/quran.svg", 2, isPortrait),
                      _operationButtons.paddingOnly(top: 32, bottom: 32),
                      _pdfButton
                    ],
                  ),
                )
              : Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _operationButtons.paddingOnly(top: 20, bottom: 32),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        menuItem("الرئيسية", "assets/icons/new/home.svg", 0, isPortrait),
                        Container(width: 1, height: 50, color: ColorConsts.greyB5Color).paddingOnly(left: 20, right: 20),
                        menuItem("عن الموسوعة", "assets/icons/new/intro.svg", 1, isPortrait),
                        Container(width: 1, height: 50, color: ColorConsts.greyB5Color).paddingOnly(left: 20, right: 20),
                        menuItem("اللجنة الإشرافية", "assets/icons/new/members.svg", 4, isPortrait),
                        Container(width: 1, height: 50, color: ColorConsts.greyB5Color).paddingOnly(left: 20, right: 20),
                        menuItem("قراءة القرآن الكريم", "assets/icons/new/quran.svg", 2, isPortrait),
                      ],
                    ),
                    32.height,
                    _pdfButton
                  ],
                ).paddingAll(12),
        ),
      ),
    );
  }

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

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