import 'package:fis_i18n/i18n.dart';
import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/remedical/vocabulary_entry/widgets/entries_class_ification_body.dart';
import 'package:flyinsono/pages/remedical/vocabulary_entry/widgets/entries_item.dart';
import 'package:flyinsono/pages/remedical/vocabulary_entry/widgets/entry_card.dart';
import 'package:flyinsono/pages/remedical/vocabulary_entry/widgets/vocabulary_entry_mobile_page.dart';
import 'package:fis_ui/widgets/tree/flutter_treeview/lib/flutter_treeview.dart';
import 'package:get/get.dart' hide Node;

import 'index.dart';

class VocabularyEntryPage extends FisView<VocabularyEntryController>
    implements FPage {
  const VocabularyEntryPage({this.pageName = 'VocabularyEntryPage', Key? key})
      : super(key: key);
  @override
  final String pageName;
  @override
  FWidget build(BuildContext context) {
    final page = context.fResponsiveVoid(
      mobile: () => _MobileLayout(this),
      desktop: () => _DesktopLayout(this),
    );
    return page;
  }
}

class EntryTreeView extends FStatefulWidget implements FPage {
  EntryTreeView({
    Key? key,
    required this.node,
    this.pageName = 'EntryTreeView',
  }) : super(key: key);
  @override
  final String pageName;
  final Node node;
  @override
  FState<EntryTreeView> createState() => _EntryTreeViewState();
}

class _EntryTreeViewState extends FState<EntryTreeView> {
  bool hovering = false;
  final controller = Get.find<VocabularyEntryController>();
  @override
  FWidget build(BuildContext context) {
    var label = widget.node.label;
    return FMouseRegion(
      cursor: SystemMouseCursors.click,
      onEnter: (e) {
        setState(() {
          hovering = true;
        });
      },
      onExit: (e) {
        setState(() {
          hovering = false;
        });
      },
      child: FGestureDetector(
        name: label,
        businessParent: widget,
        child: FColumn(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            hovering
                ? FContainer(
                    child: FRow(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        FExpanded(
                          child: _SelectText(
                            label: label,
                            isSelected:
                                controller.state.selectedKey != widget.node.key,
                          ),
                        ),
                        FObx(
                          () => controller.state.isEnableEdit
                              ? _IconRow(
                                  openEntryClassifcationDialog: () =>
                                      controller.openEntryClassifcationDialog(
                                    widget.node.key,
                                  ),
                                  removeThesaurusItemAsync: () => controller
                                      .personalEntryController
                                      .removeThesaurusItemAsync(
                                    widget.node.key,
                                    widget,
                                  ),
                                  isChoosed: controller.state.selectedKey !=
                                      widget.node.key,
                                )
                              : const FSizedBox(),
                        ),
                        FSizedBox(
                          width: 14,
                        )
                      ],
                    ),
                  )
                : FRow(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      FContainer(
                        padding: EdgeInsets.only(
                          top: 8,
                        ),
                        alignment: Alignment.center,
                        child: FCenter(
                          child: FText(
                            label,
                            style:
                                controller.state.selectedKey == widget.node.key
                                    ? TextStyle(
                                        color: Colors.white,
                                      )
                                    : TextStyle(
                                        color: Colors.black,
                                      ),
                          ),
                        ),
                      ),
                    ],
                  ),
            const FSizedBox(height: 8),
          ],
        ),
      ),
    );
  }
}

class _DesktopLayout extends FisView<VocabularyEntryController>
    implements FWidget {
  _DesktopLayout(this.businessParent, {Key? key}) : super(key: key);

  ///父级节点
  final FPage businessParent;
  @override
  FWidget build(BuildContext context) {
    return FContainer(
      color: Colors.grey.shade200,
      child: FRow(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          FContainer(
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            width: 400,
            child: FColumn(
              children: [
                _EntriesInput(businessParent),
                EntriesFunction(businessParent),
                const FSizedBox(height: 7),
                const FPadding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 20,
                  ),
                  child: FDivider(
                    height: 1,
                    color: Colors.grey,
                  ),
                ),
                const FSizedBox(height: 7),
                FExpanded(
                  child: _EntriesCard(),
                ),
              ],
            ),
          ),
          EntriesClassificationBody(),
          FExpanded(
            child: EntriesBody(),
          ),
        ],
      ),
    );
  }
}

class _EntriesCard extends FisView<VocabularyEntryController> {
  _EntriesCard({Key? key}) : super(key: key);

  @override
  FWidget build(BuildContext context) {
    return FContainer(
      child: FObx(
        () => (controller.state.entryInfos.length == 0 &&
                controller.state.keyWordsEntryInfos.length == 0)
            ? NoDataWidget()
            : FAlwaysScrollListView(
                scrollController: controller.entryCardController,
                child: QuickFWidget(ScrollConfiguration(
                  behavior: ScrollConfiguration.of(context)
                      .copyWith(scrollbars: false),
                  child: FListView.builder(
                    shrinkWrap: true,
                    itemCount: controller.state.keyWordsEntryInfos.length == 0
                        ? controller.state.entryInfos.length
                        : controller.state.keyWordsEntryInfos.length,
                    controller: controller.entryCardController,
                    itemBuilder: (context, index) {
                      return EntryCard(
                        index: index,
                        thesaurusInfo:
                            controller.state.keyWordsEntryInfos.length == 0
                                ? controller.state.entryInfos[index]
                                : controller.state.keyWordsEntryInfos[index],
                      );
                    },
                  ),
                )),
              ),
      ),
    );
  }
}

class _EntriesInput extends FisView<VocabularyEntryController> {
  const _EntriesInput(this.businessParent, {Key? key}) : super(key: key);

  ///父级节点
  final FPage businessParent;

  @override
  FWidget build(BuildContext context) {
    return FContainer(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      color: Colors.white,
      child: FRow(
        children: [
          FExpanded(
            child: FContainer(
              height: 45,
              child: FRow(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  FBorderInput(
                    hintSize: 16,
                    contentSize: 16,
                    maxLength: 20,
                    borderColor: Color.fromARGB(255, 187, 180, 180),
                    suffixIcon: FMaterial(
                      color: Colors.transparent,
                      child: FIconButton(
                        name: "searchEntryInfos",
                        businessParent: this.businessParent,
                        onPressed: () {
                          controller.searchEntryInfos();
                        },
                        icon: FIcon(
                          Icons.search,
                        ),
                      ),
                    ),
                    height: 45,
                    focusNode: controller.searchEntryInfoInputFocusNode,
                    hintText: i18nBook.common.search.t,
                    onChanged: (value) {
                      controller.state.thesaurusKeyWord = value;
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _MobileLayout extends FisView<VocabularyEntryController>
    implements FWidget {
  const _MobileLayout(this.businessParent, {Key? key}) : super(key: key);

  ///父级节点
  final FPage businessParent;

  @override
  FWidget build(BuildContext context) {
    return FSafeArea(
      top: false,
      child: FScaffold(
        appBar: FAppBar.simple(
          title: i18nBook.remedical.vocabulary.t,
          onBackClicked: () => Get.back(),
        ),
        body: FContainer(
          child: VocabularyEntryMobilePage(),
        ),
        bottomNavigationBar: FRow(),
      ),
    );
  }
}

/// 词条分类选中样式
class _SelectText extends FStatelessWidget {
  _SelectText({
    required this.isSelected,
    required this.label,
  });
  final bool isSelected;
  final String label;
  @override
  FWidget build(BuildContext context) {
    return FContainer(
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.only(
        top: 8,
      ),
      child: FText(
        label,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          color: isSelected ? Colors.black : Colors.white,
        ),
      ),
    );
  }
}

/// 词条分类的编辑和删除
class _IconRow extends FStatelessWidget {
  _IconRow({
    required this.isChoosed,
    required this.openEntryClassifcationDialog,
    required this.removeThesaurusItemAsync,
  });
  final bool isChoosed;
  final VoidCallback openEntryClassifcationDialog;
  final VoidCallback removeThesaurusItemAsync;
  @override
  FWidget build(BuildContext context) {
    return FRow(
      children: [
        FContainer(
          padding: EdgeInsets.only(
            top: 8,
          ),
          child: FInkWell(
            onTap: () => openEntryClassifcationDialog.call(),
            child: FIcon(
              Icons.edit,
              color: isChoosed ? Colors.black : Colors.white,
              size: 18,
            ),
          ),
        ),
        const FSizedBox(
          width: 15,
        ),
        FContainer(
          padding: const EdgeInsets.only(top: 8),
          child: FInkWell(
            onTap: () => removeThesaurusItemAsync.call(),
            child: FIcon(
              Icons.delete,
              color: isChoosed ? Colors.black : Colors.white,
              size: 18,
            ),
          ),
        ),
      ],
    );
  }
}
