import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';

import '../../models/enums/translation_keys.dart';
import '../app_style/app_color.dart';

class AppFloatingActionButton extends StatefulWidget {
  const AppFloatingActionButton({Key key}) : super(key: key);

  @override
  State<AppFloatingActionButton> createState() => _AppFloatingActionButtonState();
}

class _AppFloatingActionButtonState extends State<AppFloatingActionButton> {
  double turns = 0.0;

  void _rotate() {
    setState(() {
      if (turns == 0) {
        turns += 1.0 / 8.0;
      } else {
        turns = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    const duration = Duration(milliseconds: 500);
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        AnimatedOpacity(
          opacity: turns != 0 ? 1 : 0,
          duration: duration,
          child: Card(
            shape: Theme.of(context).cardTheme.copyWith().shape,
            margin: EdgeInsetsDirectional.only(start: 60.toScreenWidth),
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 8.toScreenHeight),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const _FloatingButtonListTile(iconName: "gas_refill_request", label: TranslationKeys.gasRefillRequest, routeName: ""),
                  Padding(padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth), child: const Divider()),
                  const _FloatingButtonListTile(iconName: "transfer_request", label: TranslationKeys.transferRequest, routeName: ""),
                  Padding(padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth), child: const Divider()),
                  const _FloatingButtonListTile(iconName: "service_request", label: TranslationKeys.serviceRequest, routeName: ""),
                ],
              ),
            ),
          ),
        ),
        16.height,
        FloatingActionButton(
          child: AnimatedRotation(
            turns: turns,
            duration: duration,
            child: const Icon(Icons.add),
          ),
          onPressed: () {
            _rotate();
          },
        ),
      ],
    );
  }
}

class _FloatingButtonListTile extends StatelessWidget {
  final String iconName, routeName;
  final TranslationKeys label;

  const _FloatingButtonListTile({
    @required this.iconName,
    @required this.routeName,
    @required this.label,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.of(context).pushNamed(routeName);
      },
      child: ListTile(
        horizontalTitleGap: 40.toScreenWidth,
        leading: SvgPicture.asset(
          "assets/images/$iconName.svg",
          height: 28.toScreenWidth,
          color: context.isDark ? AppColor.primary40 : AppColor.primary70,
        ),
        title: Text(
          context.translate(label),
          style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w500),
        ),
      ),
    );
  }
}