import 'package:douyin_demo/pages/RecommendPage/BottomSheet.dart';
import 'package:douyin_demo/providers/recommend_provider.dart';
import 'package:douyin_demo/widgets/FavAnimation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'icon_text.dart';

class ButtonList extends StatefulWidget {
  ButtonList({Key? key}) : super(key: key);

  _ButtonListState createState() => _ButtonListState();
}

class _ButtonListState extends State<ButtonList> {
  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    RecommendProvider provider = Provider.of<RecommendProvider>(context);
    List<IconAnimationStage> stages1 = <IconAnimationStage>[];
    stages1.add(IconAnimationStage(
        color: Colors.grey[100]!,
        start: 1.0,
        end: 0.0,
        duration: Duration(milliseconds: 200)));
    stages1.add(IconAnimationStage(
        color: Colors.redAccent,
        start: 0.0,
        end: 1.3,
        duration: Duration(milliseconds: 300)));
    stages1.add(IconAnimationStage(
        color: Colors.redAccent,
        start: 1.3,
        end: 1.0,
        duration: Duration(milliseconds: 100)));

    List<IconAnimationStage> stages2 = <IconAnimationStage>[];
    stages2.add(IconAnimationStage(
        color: Colors.grey[100]!,
        start: 1.0,
        end: 1.2,
        duration: Duration(milliseconds: 200)));
    stages2.add(IconAnimationStage(
        color: Colors.grey[100]!,
        start: 1.2,
        end: 1.0,
        duration: Duration(milliseconds: 200)));

    List<IconAnimationStage> stages3 = <IconAnimationStage>[];
    stages3.add(IconAnimationStage(
        color: Colors.redAccent,
        start: 1.0,
        end: 1.2,
        duration: Duration(milliseconds: 200)));
    stages3.add(IconAnimationStage(
        color: Colors.grey[100]!,
        start: 1.2,
        end: 1.0,
        duration: Duration(milliseconds: 200)));
    double iconSize = 70 * rpx;
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
              width: 90 * rpx,
              height: 105 * rpx,
              child: Stack(
                children: [
                  Container(
                      // decoration: BoxDecoration(c),
                      width: 90 * rpx,
                      height: 90 * rpx,
                      child: CircleAvatar(
                        backgroundImage:
                            NetworkImage("${provider.mainInfo.avatarUrl}"),
                      )),
                  Positioned(
                    bottom: 0,
                    left: 25 * rpx,
                    child: Container(
                      width: 40 * rpx,
                      height: 40 * rpx,
                      decoration: BoxDecoration(
                          color: Colors.redAccent,
                          borderRadius: BorderRadius.circular(25)),
                      child: Icon(
                        Icons.add,
                        size: 20,
                        color: Colors.white,
                      ),
                    ),
                  )
                ],
              )),
          IconText(
            text: "${provider.mainInfo.favCount}",
            icon: !provider.mainInfo.ifFaved
                ? AnimatedIconWidget(
                    key: UniqueKey(),
                    animationList: stages1,
                    icon: Icons.favorite,
                    size: iconSize,
                    provider: provider,
                    callback: () {
                      provider.tapFav();
                    },
                    callbackDelay: Duration(seconds: 1),
                  )
                : AnimatedIconWidget(
                    key: UniqueKey(),
                    animationList: stages3,
                    icon: Icons.favorite,
                    size: iconSize,
                    provider: provider,
                    callback: () {
                      provider.tapFav();
                    }, callbackDelay: Duration(seconds: 1),
                  ),
          ),
          IconText(
            text: "${provider.mainInfo.replyCount}",
            icon: AnimatedIconWidget(
              animationList: stages2,
              icon: Icons.comment,
              size: iconSize,
              callbackDelay: Duration(milliseconds: 200),
              callback: () {
                showBottom(context, provider);
              },
              provider: RecommendProvider(),
            ),
          ),
          IconText(
            text: "${provider.mainInfo.shareCount}",
            icon: AnimatedIconWidget(
              animationList: stages2,
              icon: Icons.reply,
              size: iconSize,
              callback: () {},
              callbackDelay: Duration(seconds: 1),
              provider: RecommendProvider(),
            ),
          ),
        ],
      ),
    );
  }

  showBottom(context, provider) {
    double height = MediaQuery.of(context).size.height;
    provider.setScreenHeight(height);
    provider.hideBottomBar();
    showModalBottomSheet(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadiusDirectional.circular(10)),
        context: context,
        builder: (_) {
          return Container(
              height: 600,
              child: GestureDetector(
                  onTap: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                  },
                  child: ReplyFullList(pCtx: context)));
        });
  }
}