import 'package:flutter/material.dart';
import 'package:Parlando/res/resources.dart';
import 'package:Parlando/util/theme_utils.dart';
import 'package:Parlando/widgets/load_image.dart';

class PoemMoreMenu extends StatefulWidget {
  const PoemMoreMenu({
    Key? key,
  }) : super(key: key);

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

class _PoemMoreMenuState extends State<PoemMoreMenu>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 200),
      vsync: this,
    );

    _scaleAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Color backgroundColor = context.backgroundColor;
    final Color? iconColor = ThemeUtils.getIconColor(context);

    final Widget body = Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.only(right: 12.0),
          child: LoadAssetImage(
            'common/jt',
            width: 8.0,
            height: 4.0,
            color: ThemeUtils.getDarkColor(context, Colours.dark_bg_color),
          ),
        ),
        SizedBox(
          width: 120.0,
          height: 60.0,
          child: TextButton.icon(
            onPressed: () {},
            icon: IconButton(
              icon: const Icon(
                Icons.mic_none_outlined,
                size: 16.0,
              ),
              color: iconColor,
              onPressed: () {},
            ),
            label: const Text('录音'),
            style: TextButton.styleFrom(
              primary: Theme.of(context).textTheme.bodyText2?.color,
              onSurface: Theme.of(context)
                  .textTheme
                  .bodyText2
                  ?.color
                  ?.withOpacity(0.12),
              backgroundColor: backgroundColor,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(8.0),
                  topRight: Radius.circular(8.0),
                ),
              ),
            ),
          ),
        ),
        Container(
          width: 120.0,
          height: 0.6,
          color: Colours.line,
        ),
        SizedBox(
          width: 120.0,
          height: 60.0,
          child: TextButton.icon(
            onPressed: () {},
            icon: IconButton(
              icon: const Icon(
                Icons.camera_alt_outlined,
                size: 16.0,
              ),
              color: iconColor,
              onPressed: () {},
            ),
            label: const Text('拍摄'),
            style: TextButton.styleFrom(
              primary: Theme.of(context).textTheme.bodyText2?.color,
              onSurface: Theme.of(context)
                  .textTheme
                  .bodyText2
                  ?.color
                  ?.withOpacity(0.12),
              backgroundColor: backgroundColor,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.zero,
              ),
            ),
          ),
        ),
        Container(
          width: 120.0,
          height: 0.6,
          color: Colours.line,
        ),
        SizedBox(
          width: 120.0,
          height: 60.0,
          child: TextButton.icon(
            onPressed: () {},
            icon: IconButton(
              icon: const Icon(
                Icons.delete_forever_outlined,
                size: 16.0,
              ),
              color: iconColor,
              onPressed: () {},
            ),
            label: const Text('删除'),
            style: TextButton.styleFrom(
              primary: Theme.of(context).textTheme.bodyText2?.color,
              onSurface: Theme.of(context)
                  .textTheme
                  .bodyText2
                  ?.color
                  ?.withOpacity(0.12),
              backgroundColor: backgroundColor,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(8.0),
                  bottomRight: Radius.circular(8.0),
                ),
              ),
            ),
          ),
        ),
      ],
    );

    return AnimatedBuilder(
      animation: _scaleAnimation,
      builder: (_, child) {
        return Transform.scale(
          scale: _scaleAnimation.value,
          alignment: Alignment.topRight,
          child: child,
        );
      },
      child: body,
    );
  }
}