import 'package:flutter/material.dart';
import 'package:syncrow_app/features/devices/view/widgets/four_scene_switch/four_switches_card_dialog.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class FourSelectSwitchDialog extends StatefulWidget {
  final Function()? cancelTab;
  final Function(String)? confirmTab;

  final String switch1Title;
  final String switch2Title;
  final String switch3Title;
  final String switch4Title;

  const FourSelectSwitchDialog(
      {super.key,
      required this.cancelTab,
      required this.confirmTab,
      required this.switch1Title,
      required this.switch2Title,
      required this.switch3Title,
      required this.switch4Title});

  @override
  State<FourSelectSwitchDialog> createState() => _FourSelectSwitchDialogState();
}

class _FourSelectSwitchDialogState extends State<FourSelectSwitchDialog> {
  String selectedSwitchName = ''; // State variable to track selected switch

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      backgroundColor: ColorsManager.onPrimaryColor,
      contentPadding: EdgeInsets.zero,
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const SizedBox(height: 10),
          const BodyLarge(
            text: 'Select Switch',
            fontWeight: FontWeight.w700,
            fontColor: ColorsManager.primaryColor,
            fontSize: 16,
          ),
          const Padding(
            padding: EdgeInsets.only(left: 15, right: 15),
            child: Divider(color: ColorsManager.textGray),
          ),
          const SizedBox(height: 20),
          Row(
            children: [
              FourSwitchsCardDialog(
                switch1Title: widget.switch1Title,
                switch2Title: widget.switch2Title,
                switch3Title: widget.switch3Title,
                switch4Title: widget.switch4Title,
                switch1Down: selectedSwitchName == 'scene_3'
                    ? Assets.removeSceneIcon
                    : Assets.addSwitchIcon,
                switch1Up: selectedSwitchName == 'scene_1'
                    ? Assets.removeSceneIcon
                    : Assets.addSwitchIcon,
                switch2Down: selectedSwitchName == 'scene_4'
                    ? Assets.removeSceneIcon
                    : Assets.addSwitchIcon,
                switch2Up: selectedSwitchName == 'scene_2'
                    ? Assets.removeSceneIcon
                    : Assets.addSwitchIcon,
                onSwitch1UpTap: () {
                  setState(() => selectedSwitchName = 'scene_1');
                },
                onSwitch1DownTap: () {
                  setState(() => selectedSwitchName = 'scene_3');
                },
                onSwitch2UpTap: () {
                  setState(() => selectedSwitchName = 'scene_4');
                },
                onSwitch2DownTap: () {
                  setState(() => selectedSwitchName = 'scene_2');
                },
              ),
            ],
          ),
          const SizedBox(height: 20),
          const Padding(
            padding: EdgeInsets.only(bottom: 15, left: 5, right: 5, top: 10),
            child: Center(
              child: Text(
                'Please select one of the switches available to continue',
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Row(
            children: [
              Expanded(
                child: Container(
                  decoration: const BoxDecoration(
                      border: Border(
                    right:
                        BorderSide(color: ColorsManager.textGray, width: 0.5),
                    top: BorderSide(color: ColorsManager.textGray, width: 1.0),
                  )),
                  child: SizedBox(
                    child: InkWell(
                      onTap: widget.cancelTab,
                      child: const Padding(
                        padding: EdgeInsets.all(15),
                        child: Center(
                          child: Text(
                            'Cancel',
                            style: TextStyle(
                                color: ColorsManager.textPrimaryColor,
                                fontSize: 14,
                                fontWeight: FontWeight.w400),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  decoration: const BoxDecoration(
                      border: Border(
                    left: BorderSide(color: ColorsManager.textGray, width: 0.5),
                    top: BorderSide(color: ColorsManager.textGray, width: 1.0),
                  )),
                  child: InkWell(
                    onTap: selectedSwitchName == ''
                        ? () {}
                        : () => widget.confirmTab!(selectedSwitchName),
                    child: Padding(
                      padding: EdgeInsets.all(15),
                      child: Center(
                        child: Text(
                          'Next',
                          style: TextStyle(
                              color: selectedSwitchName == ''
                                  ? ColorsManager.textPrimaryColor
                                      .withOpacity(0.6)
                                  : ColorsManager.primaryColor,
                              fontSize: 14,
                              fontWeight: FontWeight.w400),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
