import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class FactoryResetWidget extends StatefulWidget {
  const FactoryResetWidget({super.key, required this.callFactoryReset});

  final Function() callFactoryReset;

  @override
  State<FactoryResetWidget> createState() => _FactoryResetWidgetState();
}

class _FactoryResetWidgetState extends State<FactoryResetWidget> {
  bool _showConfirmation = false;

  void _toggleConfirmation() {
    setState(() {
      _showConfirmation = !_showConfirmation;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DeviceControlsContainer(
      child: _showConfirmation
          ? Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Factory Reset',
                  style: context.textTheme.titleMedium!.copyWith(
                    fontWeight: FontWeight.bold,
                    color: ColorsManager.blackColor,
                  ),
                ),
                Text(
                  'Are you sure?',
                  style: context.textTheme.bodySmall!.copyWith(
                    color: ColorsManager.grayColor,
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  children: [
                    Flexible(
                      child: DefaultButton(
                        height: 20,
                        elevation: 0,
                        padding: 0,
                        onPressed: _toggleConfirmation,
                        backgroundColor: ColorsManager.greyColor,
                        child: Text(
                          'Cancel',
                          style: context.textTheme.bodyMedium!.copyWith(
                            color: ColorsManager.blackColor,
                            fontWeight: FontWeight.w400,
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 8),
                    Flexible(
                      child: DefaultButton(
                        height: 20,
                        elevation: 0,
                        padding: 0,
                        onPressed: widget.callFactoryReset,
                        backgroundColor: ColorsManager.red,
                        child: Text(
                          'Reset',
                          style: context.textTheme.bodyMedium!.copyWith(
                            color: ColorsManager.whiteColors,
                            fontWeight: FontWeight.w400,
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            )
          : GestureDetector(
              onTap: _toggleConfirmation,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ClipOval(
                    child: Container(
                      color: ColorsManager.whiteColors,
                      height: 60,
                      width: 60,
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: SvgPicture.asset(
                          Assets.factoryReset,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Text(
                    'Factory Reset',
                    style: context.textTheme.titleMedium!.copyWith(
                      fontWeight: FontWeight.w400,
                      color: ColorsManager.blackColor,
                    ),
                  ),
                ],
              ),
            ),
    );
  }
}
