import 'package:animated_reorderable_list/animated_reorderable_list.dart';
import 'package:flutter/material.dart';
import 'package:plan/api/dto/daily_tip_dto.dart';
import 'package:plan/api/endpoints/other.dart';
import 'package:remixicon/remixicon.dart';

class QuoteCard extends StatefulWidget {
  const QuoteCard({super.key});

  @override
  State<QuoteCard> createState() => _QuoteCardState();
}

class _QuoteCardState extends State<QuoteCard> {
  List<DailyTipDto> _list = [];
  int _currentIndex = 0;

  ///获取当前语句
  DailyTipDto? get currentTip => _list.isEmpty ? null : _list[_currentIndex];

  @override
  void initState() {
    super.initState();
    _init();
  }

  void _init() async {
    var res = await getDailyTipList();
    setState(() {
      _list = res;
    });
  }

  ///切换下一条
  void _next() {
    setState(() {
      _currentIndex = (_currentIndex + 1) % _list.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_list.isEmpty) {
      return SizedBox();
    }
    return Container(
      margin: EdgeInsets.only(top: 20),
      padding: const EdgeInsets.all(3),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          border: Border.all(
            width: 2,
            color: Theme.of(context).colorScheme.surfaceContainerHigh,
          ),
          borderRadius: BorderRadius.circular(5),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _fadeText(
              currentTip?.title ?? "",
              Theme.of(context).textTheme.titleSmall,
            ),
            SizedBox(height: 10),
            _fadeText(
              currentTip?.content ?? "",
              Theme.of(context).textTheme.labelMedium,
            ),
            GestureDetector(
              onTap: _next,
              child: Container(
                margin: EdgeInsets.only(top: 10),
                child: Row(
                  spacing: 5,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(RemixIcons.arrow_right_circle_line, size: 18),
                    Text("Next", style: Theme.of(context).textTheme.bodySmall),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  ///渐变文字动画
  Widget _fadeText(String text, TextStyle? style) {
    return AnimatedSize(
      duration: const Duration(milliseconds: 400),
      child: Container(
        alignment: Alignment.topLeft,
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 400),
          transitionBuilder: (Widget child, Animation<double> animation) {
            return FadeTransition(
              opacity: animation,
              child: child,
            );
          },
          layoutBuilder: (Widget? currentChild, List<Widget> previousChildren) {
            return Stack(
              children: <Widget>[
                if (currentChild != null) currentChild, // 新 child
                Positioned(
                  top: 0,
                  child: Opacity(
                    opacity: 0.3,
                    child: Column(
                      children: previousChildren,
                    ),
                  ),
                ),
              ],
            );
          },
          child: Text(text, key: Key(text), style: style),
        ),
      ),
    );
  }
}