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 FirmwareUpdateWidget extends StatefulWidget {
  const FirmwareUpdateWidget({super.key, required this.deviceId, required this.version});

  final String deviceId;
  final int version;

  @override
  State<FirmwareUpdateWidget> createState() => _FirmwareUpdateWidgetState();
}

class _FirmwareUpdateWidgetState extends State<FirmwareUpdateWidget> {
  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: [
                Column(
                  children: [
                    Text(
                      'Firmware Update',
                      style: context.textTheme.titleMedium!.copyWith(
                        fontWeight: FontWeight.bold,
                        color: ColorsManager.blackColor,
                      ),
                    ),
                    Text(
                      'Are you sure?',
                      style: context.textTheme.bodySmall!.copyWith(
                        color: ColorsManager.grayColor,
                      ),
                    ),
                  ],
                ),
                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: () {
                          _toggleConfirmation();
                        },
                        backgroundColor: ColorsManager.primaryColor,
                        child: Text(
                          'Update',
                          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.firmware,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  Text(
                    'Firmware Update',
                    style: context.textTheme.titleMedium!.copyWith(
                      fontWeight: FontWeight.w400,
                      color: ColorsManager.blackColor,
                    ),
                  ),
                ],
              ),
            ),
    );
  }
}