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 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/pages/new_gas_refill_request_page.dart';
import 'package:test_sa/views/pages/device_transfer/request_device_transfer.dart';
import 'package:test_sa/views/pages/user/requests/create_service_request_page.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: 250);
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: [
        Visibility(
          visible: turns != 0,
          maintainAnimation: true,
          maintainState: true,
          child: AnimatedOpacity(
            opacity: turns != 0 ? 1 : 0,
            duration: duration,
            child: Container(
              width: MediaQuery.of(context).size.width * .66,
              padding: EdgeInsets.all(16),
              decoration: ShapeDecoration(
                color: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                shadows: const [BoxShadow(color: Color(0x0C000000), blurRadius: 10, offset: Offset(0, 0), spreadRadius: 0)],
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  fabItem(context.translation.gasRefillRequest, "gas_refill_request", NewGasRefillRequestPage.routeName),
                  1.divider.paddingOnly(top: 16, bottom: 16),
                  fabItem(context.translation.transferRequest, "transfer_request", RequestDeviceTransfer.id),
                  1.divider.paddingOnly(top: 16, bottom: 16),
                  fabItem(context.translation.serviceRequest, "service_request", CreateServiceRequestPage.id),
                ],
              ),
            ),
          ),
        ),
        16.height,
        FloatingActionButton(
          child: AnimatedRotation(
            turns: turns,
            duration: duration,
            child: const Icon(Icons.add),
          ),
          onPressed: () {
            _rotate();
          },
        ),
      ],
    );
  }

  Widget fabItem(String label, String iconName, routeName) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          flex: 4,
          child: Text(
            label,
            textAlign: TextAlign.center,
            style: AppTextStyles.heading5.copyWith(color: AppColor.neutral50),
          ),
        ),
        // 4.width,
        Expanded(
          flex: 1,
          child: SvgPicture.asset(
            "assets/images/$iconName.svg",
            height: 24.toScreenHeight,
            width: 24.toScreenWidth,
            color: context.isDark ? AppColor.primary40 : AppColor.primary70,
          ),
        )
      ],
    ).onPress(() {
      _rotate();
      Navigator.of(context).pushNamed(routeName);
    });
  }
}