import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:satu/core/redux/actions/nav_actions.dart';
import 'package:satu/core/redux/actions/user_actions.dart';
import 'package:satu/core/redux/state/user_state.dart';
import 'package:satu/core/redux/store.dart';

import 'package:satu/shared/app_colors.dart';
import 'package:satu/shared/ui_helpers.dart';
import 'package:satu/views/analytics/analytics_view.dart';
import 'package:satu/views/dictionaries/category/category_view.dart';
import 'package:satu/views/dictionaries/contragents/contragents_view.dart';
import 'package:satu/views/dictionaries/goods/goods_view.dart';
import 'package:satu/views/settings/setting_view.dart';
import 'package:satu/views/work/work_view.dart';

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        decoration: const BoxDecoration(color: backgroundColor),
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            _createHeader(),
            _createDrawerSectionTitle(text: 'ОСНОВНОЙ РАЗДЕЛ'),
            _createDrawerItem(
              svgFile: 'sell',
              text: 'Касса',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(navigateDrawer(WorkView));
              },
            ),
            _createDrawerItem(
              icon: Icons.analytics,
              text: 'Аналитика',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(navigateDrawer(AnalyticsView));
              },
            ),
            _createDrawerItem(
              icon: Icons.archive,
              text: 'Остатки',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(navigateDrawer(AnalyticsView));
              },
              disable: true,
            ),
            _createDrawerItem(
              svgFile: 'inventarization',
              text: 'Инвентаризация',
              disable: true,
            ),
            _createDrawerSectionTitle(text: 'СПРАВОЧНИКИ'),
            _createDrawerItem(
              svgFile: 'categories',
              text: 'Категории',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(navigateDrawer(CategoryDictionaryView));
              },
            ),
            _createDrawerItem(
              svgFile: 'goods',
              text: 'Товары',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(navigateDrawer(GoodsDictionaryView));
              },
            ),
            _createDrawerItem(
              svgFile: 'contragents',
              text: 'Контрагенты',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(
                    navigateDrawer(ContragentsDictionaryView)
                );
              },
            ),
            _createDrawerSectionTitle(text: 'ИНФОРМАЦИЯ'),
            _createDrawerItem(
              svgFile: 'question',
              text: 'Справочник',
              disable: true,
            ),
            _createDrawerSectionTitle(text: 'ПРОЧЕЕ'),
            _createDrawerItem(
              svgFile: 'settings',
              text: 'Настройки',
              onTap: () {
                Navigator.of(context).pop();
                Redux.store!.dispatch(navigateDrawer(SettingsView));
              },
            ),
            _createDrawerItem(
              svgFile: 'global',
              text: 'Перейти на сайт',
              disable: true,
            ),
            _createDrawerItem(
              svgFile: 'bug',
              text: 'Сообщить об ошибке',
              disable: true,
            ),
            _createDrawerItem(
              svgFile: 'logout',
              text: 'Выйти из аккаунта',
              isDanger: true,
              onTap: () async {
                Redux.store!.dispatch(logout);
              },
            ),
            _createDrawerSectionTitle(text: ''),
          ],
        ),
      ),
    );
  }

  Widget _createHeader() {
    return SizedBox(
      height: 180.h,
      child: DrawerHeader(
        margin: EdgeInsets.zero,
        padding: EdgeInsets.zero,
        decoration: const BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage('assets/images/drawer/background.png'),
          ),
        ),
        child: Stack(
          children: <Widget>[
            Positioned(
              bottom: 12.0,
              left: 16.0,
              child: Row(
                children: [
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: Container(
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          fit: BoxFit.cover,
                          image: AssetImage(
                            'assets/images/drawer/user.png',
                          ),
                        ),
                      ),
                    ),
                  ),
                  horizontalSpaceSmall,
                  StoreConnector<AppState, UserState>(
                    converter: (store) => store.state.userState!,
                    builder: (context, snapshot) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            snapshot.auth?.username ?? '',
                            style: const TextStyle(fontSize: 16.0),
                          ),
                          const Text(
                            'Продавец',
                            style: TextStyle(fontSize: 12),
                          ),
                        ],
                      );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _createDrawerItem(
      {required String text,
      IconData? icon,
      String? svgFile,
      GestureTapCallback? onTap,
      bool isDanger = false,
      bool disable = false}) {
    return Container(
      decoration: const BoxDecoration(color: whiteColor),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: disable ? () {} : onTap,
          child: Padding(
            padding:
                const EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
            child: Row(
              children: <Widget>[
                if (svgFile != null)
                  SvgPicture.asset(
                    'assets/images/svg/$svgFile.svg',
                    height: 20,
                    width: 20,
                    color: disable
                        ? disableColor
                        : isDanger
                            ? dangerColor
                            : textColor,
                  ),
                if (icon != null)
                  Icon(
                    icon,
                    size: 20.0,
                    color: disable
                        ? disableColor
                        : isDanger
                            ? dangerColor
                            : textColor,
                  ),
                Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: Text(
                    text,
                    style: TextStyle(
                      fontSize: 14.0,
                      color: disable
                          ? disableColor
                          : isDanger
                              ? dangerColor
                              : textColor,
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _createDrawerSectionTitle({required String text}) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
      child: Text(
        text,
        style: const TextStyle(fontSize: 10.0, color: placeholderColor),
      ),
    );
  }
}