import 'package:flutter/material.dart';
import 'package:wisdom_cli/wisdom_cli.dart';
import '../../../../app_package.dart';
import '../../../models/hgj_menu.dart';
import '../../../view_models/menu_drag_list_store.dart';

class Menu_drag_list extends StatelessWidget {
  const Menu_drag_list({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => MenuDragListStore(context),
      child: _PageView(),
      lazy: false,
    );
  }
}

class _PageView extends StatefulWidget {
  _PageView({Key? key}) : super(key: key);
  @override
  _PageViewState createState() => _PageViewState();
}

class _PageViewState extends State<_PageView> {
  @override
  Widget build(BuildContext context) {
    final style = WTheme.of(context);
    final colorScheme = style.colorScheme;
    final store = Provider.of<MenuDragListStore>(context, listen: true);
    final list = store.orderNewList;
    return Scaffold(
      appBar: WAppBar(
        brightness: Brightness.light,
        iconTheme: IconThemeData(
          color: colorScheme.mainTitle,
          size: 19.pt,
        ),
        backgroundColor: Colors.white,
        title: WisText('功能管理',
            size: 19.pt, weight: FontWeight.w600, color: colorScheme.mainTitle),
        actions: [
          // Wisdom.row(
          //     crossAxisAlignment: CrossAxisAlignment.center,
          //     margin: EdgeInsets.only(right: 15.pt),
          //     onTap: () => store.onConfirmOrder(),
          //     children: [
          //       WisText(
          //         '保存',
          //         color: colorScheme.mainTitle,
          //         size: 15.pt,
          //       ),
          //     ]),
        ],
      ),
      body: WisScrollView(onInit: () => store.onInit(), slivers: <Widget>[
        Wisdom.column(
          color: Colors.white,
          padding: EdgeInsets.only(top: 15.pt),
          children: [
            _ListBlock(
              title: '首页功能',
              titleTip: WisText(
                '长按拖动可调整应用位置',
                color: colorScheme.placeholder2,
                size: 13.pt,
              ),
              child: Row(children: [
                ReorderableWrap(
                onReorder: (int oldIndex, int newIndex) =>
                    store.orderMenuList(list, oldIndex, newIndex),
                children: [
                  for (var i = 0; i < list.length; i++)
                    Stack(
                      children: [
                        Container(
                          key: Key('$i'),
                          width:
                              ((MediaQuery.of(context).size.width - 30.pt) / 4),
                          child: Wisdom.column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            padding: EdgeInsets.all(4.pt),
                            children: <Widget>[
                              Wisdom(
                                margin: EdgeInsets.only(bottom: 1.pt),
                                child: WImage.network(
                                  list[i].id == 'scan' ||
                                          list[i].id == 'message_index' ||
                                          list[i].id == 'green'
                                      ? list[i].icon
                                      : AppParseUtil.image('${list[i].icon}'),
                                  width: 44.pt,
                                  height: 44.pt,
                                ),
                              ),
                              WisText(
                                '${list[i].name}',
                                size: 13.pt,
                                color: colorScheme.mainTitle,
                                height: 1.8,
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ],
                          ),
                        ),
                        Positioned(
                          right: 0,
                          top: -10.pt,
                          child: Wisdom(
                            padding: EdgeInsets.all(10.pt),
                            onTap: () => store.removeHomeFunc(list[i], i),
                            child: Icon(
                              Icons.do_disturb_on_rounded,
                              size: 20.pt,
                              color: Color.fromARGB(196, 159, 165, 183),
                              shadows: [
                                BoxShadow(
                                  color: Color.fromARGB(96, 159, 165, 183),
                                  offset: Offset(2, 2.pt),
                                  blurRadius: 10.pt,
                                  spreadRadius: 2.5.pt,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    )
                ],
              ).asFlexible(flex: 1),
              ]),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                if (store.scurityItem != null) ...[
                  WisCard(
                    margin: EdgeInsets.fromLTRB(15.pt, 0, 15.pt, 15.pt),
                    padding: EdgeInsets.symmetric(
                      horizontal: 0,
                      vertical: 15.pt,
                    ),
                    child: Column(
                      children: [
                        Wisdom.row(
                            padding: EdgeInsets.fromLTRB(15.pt, 0, 0, 0),
                            children: [
                              WisText('安保',
                                  bold: true,
                                  color: colorScheme.mainTitle,
                                  size: 18.pt),
                              SizedBox(
                                width: 10.pt,
                              ),
                            ]),
                        SizedBox(
                          height: 15.pt,
                        ),
                        _ListBlockItem(
                          item: store.scurityItem,
                          addItem: () => store.addHomeFunc(store.scurityItem),
                        ),
                      ],
                    ),
                  )
                ],
                if (store.cleanItem != null) ...[
                  WisCard(
                    margin: EdgeInsets.fromLTRB(15.pt, 0, 15.pt, 15.pt),
                    padding: EdgeInsets.symmetric(
                      horizontal: 0,
                      vertical: 15.pt,
                    ),
                    child: Column(
                      children: [
                        Wisdom.row(
                            padding: EdgeInsets.fromLTRB(15.pt, 0, 0, 0),
                            children: [
                              WisText('保洁',
                                  bold: true,
                                  color: colorScheme.mainTitle,
                                  size: 18.pt),
                              SizedBox(
                                width: 10.pt,
                              ),
                            ]),
                        SizedBox(
                          height: 15.pt,
                        ),
                        _ListBlockItem(
                          item: store.cleanItem,
                          addItem: () => store.addHomeFunc(store.cleanItem),
                        ),
                      ],
                    ),
                  )
                ],
                WisCard(
                  margin: EdgeInsets.fromLTRB(15.pt, 0, 15.pt, 15.pt),
                  padding: EdgeInsets.symmetric(
                    horizontal: 0,
                    vertical: 15.pt,
                  ),
                  child: Column(
                    children: [
                      Wisdom.row(
                          padding: EdgeInsets.fromLTRB(15.pt, 0, 0, 0),
                          children: [
                            WisText('绿化',
                                bold: true,
                                color: colorScheme.mainTitle,
                                size: 18.pt),
                            SizedBox(
                              width: 10.pt,
                            ),
                          ]),
                      SizedBox(
                        height: 15.pt,
                      ),
                      _ListBlockItem(
                        item: store.greenItem,
                        addItem: () => store.addHomeFunc(store.greenItem),
                      ),
                    ],
                  ),
                )
              ],
            ),
            if (store.engineerRouteList.length > 0) ...[
              _ListBlock(
                title: '工程',
                child: Row(
                  children: [
                    Wrap(
                      children: [
                        for (HgjMenuModel item in store.engineerRouteList)
                          _ListBlockItem(
                            item: item,
                            addItem: () => store.addHomeFunc(item),
                          ),
                      ],
                    ).asFlexible(flex: 1),
                  ],
                ),
              ),
            ],
            if (store.feeRouteList.length > 0) ...[
              _ListBlock(
                title: '收费',
                child: Row(
                  children: [
                    Wrap(
                      children: [
                        if (store.feeRouteList.length > 0) ...[
                          for (HgjMenuModel item in store.feeRouteList)
                            _ListBlockItem(
                              item: item,
                              addItem: () => store.addHomeFunc(item),
                            ),
                        ] else ...[
                          WEmptyWidget.plain(
                            text: WisText('该分组暂无功能'),
                          )
                        ]
                      ],
                    ).asFlexible(flex: 1),
                  ],
                ),
              ),
            ],
            if (store.customRouteList.length > 0) ...[
              _ListBlock(
                title: '客服',
                child: Row(
                  children: [
                    Wrap(
                      children: [
                        for (HgjMenuModel item in store.customRouteList)
                          _ListBlockItem(
                            item: item,
                            addItem: () => store.addHomeFunc(item),
                          ),
                      ],
                    ).asFlexible(flex: 1),
                  ],
                ),
              ),
            ],
            if (store.houseRouteList.length > 0) ...[
              _ListBlock(
                title: '房管',
                child: Row(
                  children: [
                    Wrap(
                      children: [
                        for (HgjMenuModel item in store.houseRouteList)
                          _ListBlockItem(
                            item: item,
                            addItem: () => store.addHomeFunc(item),
                          ),
                      ],
                    ).asFlexible(flex: 1),
                  ],
                ),
              ),
            ],
            _ListBlock(
              title: '通用',
              child: Row(
                children: [
                  Wrap(
                    children: [
                      for (HgjMenuModel item in store.generalRouteList)
                        _ListBlockItem(
                          item: item,
                          addItem: () => store.addHomeFunc(item),
                        ),
                    ],
                  ).asFlexible(flex: 1),
                ],
              ),
            ),
          ],
        ).asSliver()
      ]),
      bottomNavigationBar: Wisdom.row(
        color: Colors.white,
        padding: EdgeInsets.all(15.pt),
        children: [
          WButton(
            onPressed: () => Navigator.pop(context),
            color: Colors.transparent,
            shape: RoundedRectangleBorder(
              side: BorderSide(width: 1, color: colorScheme.primary),
              borderRadius: BorderRadius.circular(30.pt),
            ),
            textColor: colorScheme.primary,
            height: 44.pt,
            child: Text('取消'),
          ).asExpanded(),
          SizedBox(width: 15.pt),
          WLoadingButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.pt),
            ),
            onPressed: () => store.onConfirmOrder(),
            color: colorScheme.primary,
            height: 44.pt,
            child: Text('保存配置'),
          ).asExpanded(),
        ],
      ),
    );
  }
}

class _ListBlockItem extends StatelessWidget {
  final item;
  final Function() addItem;
  const _ListBlockItem({
    Key? key,
    required this.item,
    required this.addItem,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final colorScheme = WTheme.of(context).colorScheme;
    final store = Provider.of<MenuDragListStore>(context, listen: true);
    return Stack(
      children: [
        Container(
          key: Key('${item.route}'),
          width: ((MediaQuery.of(context).size.width - 30.pt) / 4),
          child: Wisdom.column(
            crossAxisAlignment: CrossAxisAlignment.center,
            padding: EdgeInsets.all(4.pt),
            children: <Widget>[
              Wisdom(
                margin: EdgeInsets.only(bottom: 1.pt),
                child: WImage.network(
                  item.id == 'scan' ||
                          item.id == 'message_index' ||
                          item.id == "green"
                      ? item.icon
                      : AppParseUtil.image('${item.icon}'),
                  width: 44.pt,
                  height: 44.pt,
                ),
              ),
              WisText(
                '${item.name}',
                size: 13.pt,
                color: colorScheme.mainTitle,
                height: 1.8,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
        if (store.orderRouteList.contains(item.id) == false) ...[
          Positioned(
            right: 0.pt,
            top: -10.pt,
            child: Wisdom(
              padding: EdgeInsets.all(10.pt),
              onTap: () => addItem(),
              child: Icon(
                Icons.add_circle,
                size: 20.pt,
                color: Color.fromARGB(197, 15, 104, 248),
                shadows: [
                  BoxShadow(
                    color: Color.fromARGB(97, 15, 104, 248),
                    offset: Offset(2, 2.pt),
                    blurRadius: 10.pt,
                    spreadRadius: 2.5.pt,
                  ),
                ],
              ),
            ),
          ),
        ]
      ],
    );
  }
}

class _ListBlock extends StatelessWidget {
  final String title;
  final Widget child;
  final Widget? titleTip;
  const _ListBlock(
      {Key? key, required this.title, required this.child, this.titleTip})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final colorScheme = WTheme.of(context).colorScheme;
    return WisCard(
      margin: EdgeInsets.fromLTRB(15.pt, 0, 15.pt, 15.pt),
      padding: EdgeInsets.symmetric(
        horizontal: 0,
        vertical: 15.pt,
      ),
      child: Column(
        children: [
          Wisdom.row(padding: EdgeInsets.fromLTRB(15.pt, 0, 0, 0), children: [
            WisText(title,
                bold: true, color: colorScheme.mainTitle, size: 18.pt),
            SizedBox(
              width: 10.pt,
            ),
            titleTip ?? Container(height: 0),
          ]),
          SizedBox(
            height: 15.pt,
          ),
          child,
        ],
      ),
    );
  }
}
