import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:Parlando/poem/widgets/poem_content.dart';
import 'package:Parlando/poem/widgets/poem_more_menu.dart';
import 'package:Parlando/poem/widgets/poem_user_audio.dart';
import 'package:Parlando/poem/widgets/poem_user_comments.dart';
import 'package:Parlando/res/gaps.dart';
import 'package:Parlando/routers/fluro_navigator.dart';
import 'package:Parlando/util/image_utils.dart';
import 'package:Parlando/widgets/bars/home_menu_bar.dart';
import 'package:Parlando/widgets/my_app_bar.dart';

import 'package:Parlando/extension/int_extension.dart';
import 'package:Parlando/widgets/popup_window.dart';

import '../poem_router.dart';

enum PoemContentSwitch {
  audio,
  comment,
}

class PoemDetailPage extends StatefulWidget {
  const PoemDetailPage({
    Key? key,
    this.onPop,
    required this.poemId,
    this.poemPanelHeight = 0,
  }) : super(key: key);

  final int poemId;
  final double poemPanelHeight;
  final Function? onPop;

  @override
  _PoemDetailPageState createState() => _PoemDetailPageState();
}

class _PoemDetailPageState extends State<PoemDetailPage> {
  PoemContentSwitch contentSwitch = PoemContentSwitch.audio;
  final GlobalKey _hintKey = GlobalKey();
  final GlobalKey _moreKey = GlobalKey();

  void _showMoreMenu() {
    final RenderBox button =
        _moreKey.currentContext!.findRenderObject()! as RenderBox;
    showPopupWindow<void>(
      context: context,
      isShowBg: true,
      offset: Offset(button.size.width - 8.0, -12.0),
      anchor: button,
      child: const PoemMoreMenu(),
    );
  }

  void _showHint() {
    final RenderBox hint =
        _hintKey.currentContext!.findRenderObject()! as RenderBox;
    showPopupWindow<void>(
      context: context,
      isShowBg: true,
      offset: const Offset(50.0, 150.0),
      anchor: hint,
      child: Semantics(
        label: '弹出引导页',
        hint: '向左滑动可删除列表，点击可关闭',
        button: true,
        child: Container(
          key: const Key('hint'),
          width: 200.0,
          height: 147.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: ImageUtils.getAssetImage('poem/ydss'),
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    // 获取Build完成状态监听
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _showHint();
    });
  }

  @override
  Widget build(BuildContext context) {
    const poemStr = "清晨入古寺，初日照高林。\n竹径通幽处，禅房花木深。\n山光悦鸟性，潭影空人心。\n万籁此都寂，但余钟磬音。";
    return Scaffold(
      appBar: MyAppBar(
        key: _hintKey,
        isBack: true,
        isTransparent: false,
        homeMenuHeader: HomeMenuHeader(
          funcLeft: () {
            contentSwitch = PoemContentSwitch.audio;
            setState(() {});
          },
          funcCenter: () {
            contentSwitch = PoemContentSwitch.comment;
            setState(() {});
          },
          funcRight: () {
            NavigatorUtils.push(
              context,
              '${PoemRouter.poemRecordAudioPage}?id=100',
            );
          },
        ),
        homeActionWidgets: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 30,
              width: 30,
              child: IconButton(
                padding: const EdgeInsets.all(0.0),
                icon: const Icon(
                  Icons.star_border,
                  size: 20,
                  color: Colors.white,
                ),
                onPressed: () {},
              ),
            ),
            SizedBox(
              height: 30,
              width: 30,
              child: IconButton(
                padding: const EdgeInsets.all(0.0),
                icon: const Icon(
                  Icons.ios_share,
                  size: 20,
                  color: Colors.white,
                ),
                onPressed: () {},
              ),
            ),
            SizedBox(
              height: 30,
              width: 30,
              child: IconButton(
                key: _moreKey,
                padding: const EdgeInsets.all(0.0),
                onPressed: _showMoreMenu,
                icon: const Icon(
                  Icons.more_horiz,
                  size: 20,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
      body: Container(
        alignment: Alignment.topCenter,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/poem/poem_background.png"),
            fit: BoxFit.fill,
          ),
        ),
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin:
                    EdgeInsets.symmetric(vertical: 30.px, horizontal: 20.px),
                height: MediaQuery.of(context).size.height -
                    145.px -
                    widget.poemPanelHeight,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.grey.shade200.withOpacity(0.1),
                  border: Border.all(
                    color: Colors.grey.shade50,
                    width: 0.5,
                  ), // 边色与边宽度
                ),
                child: ClipRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 10.0,
                      sigmaY: 10.0,
                    ),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.grey.shade200.withOpacity(0.1),
                      ),
                      child: Padding(
                        padding: EdgeInsets.all(10.px),
                        child: Flex(
                          direction: Axis.vertical,
                          children: [
                            const PoemContent(
                              title: "题破山寺后禅院",
                              author: "常建",
                              poemStr: poemStr,
                            ),
                            Expanded(
                              flex: 1,
                              child: contentSwitch == PoemContentSwitch.audio
                                  ? PoemUserAudio(
                                      poemPanelHeight: widget.poemPanelHeight,
                                    )
                                  : const PoemUserComments(
                                      author: "老魔取西经",
                                      comments:
                                          "那日早上，我到达百望山顶，看着山顶空空的楼阁，想象那也可以是一所禅房吧",
                                      datetime: "2021年12月23日 辰时三刻",
                                    ),
                            ),
                            Container(
                              width: double.infinity,
                              alignment: Alignment.center,
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  IconButton(
                                    icon: Icon(
                                      Icons.mic_none,
                                      size: 36.px,
                                    ),
                                    onPressed: () {
                                      NavigatorUtils.push(
                                        context,
                                        '${PoemRouter.poemRecordAudioPage}?id=100',
                                      );
                                    },
                                  ),
                                  Gaps.hGap16,
                                  IconButton(
                                    icon: Icon(
                                      Icons.camera_alt_outlined,
                                      size: 36.px,
                                    ),
                                    onPressed: () {
                                      NavigatorUtils.push(
                                        context,
                                        '${PoemRouter.poemRecordVideoPage}?data=100',
                                      );
                                    },
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}