import 'package:flutter/material.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class TemperatureDialog extends StatefulWidget {
  final Function(String label, int toggleIndex, String selectedCity)?
      confirmTab;

  const TemperatureDialog({Key? key, this.confirmTab}) : super(key: key);

  @override
  _TemperatureDialogState createState() => _TemperatureDialogState();
}

class _TemperatureDialogState extends State<TemperatureDialog> {
  double _currentTemperature = 40;
  String _selectedCity = 'Current City';
  int selectedToggleIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              'Temperature',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue),
            ),
            const Divider(color: ColorsManager.greyColor),
            ToggleButtons(
              isSelected: [
                selectedToggleIndex == 0,
                selectedToggleIndex == 1,
                selectedToggleIndex == 2
              ],
              onPressed: (index) {
                setState(() {
                  selectedToggleIndex = index;
                });
              },
              borderRadius: BorderRadius.circular(30),
              selectedColor: Colors.white,
              color: ColorsManager.blackColor,
              fillColor: ColorsManager.primaryColorWithOpacity,
              borderColor: ColorsManager.greyColor,
              constraints: BoxConstraints.tight(const Size(70, 30)),
              children: [
                _buildToggleOption('<', selectedToggleIndex == 0),
                _buildToggleOption('=', selectedToggleIndex == 1),
                _buildToggleOption('>', selectedToggleIndex == 2),
              ],
            ),
            const SizedBox(height: 10),
            Text(
              '${_currentTemperature.toStringAsFixed(0)}°C',
              style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                  color: ColorsManager.secondaryColor.withOpacity(0.5)),
            ),
            Slider(
              activeColor: ColorsManager.secondaryColor.withOpacity(0.5),
              inactiveColor: ColorsManager.grayBox,
              thumbColor: ColorsManager.primaryColor,
              value: _currentTemperature,
              min: -40,
              max: 40,
              onChanged: (value) {
                setState(() {
                  _currentTemperature = value;
                });
              },
            ),
            ElevatedButton(
              onPressed: _selectCity,
              child: Text(
                _selectedCity,
                style: const TextStyle(
                    color: ColorsManager.grayColor,
                    fontSize: 14,
                    fontWeight: FontWeight.w400),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: ColorsManager.grayBox.withOpacity(0.6),
              ),
            ),
            const SizedBox(height: 20),
            Row(
              children: [
                _buildActionButton(context, 'Cancel', ColorsManager.textGray,
                    () => Navigator.of(context).pop()),
                _buildActionButton(
                  context,
                  'Confirm',
                  ColorsManager.primaryColor,
                  () {
                    widget.confirmTab!.call(
                        _currentTemperature.toStringAsFixed(0),
                        selectedToggleIndex,
                        _selectedCity);
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget _buildToggleOption(String label, bool isSelected) {
    return SizedBox(
      width: 70,
      height: 30,
      child: Container(
        alignment: Alignment.center,
        color: isSelected
            ? ColorsManager.secondaryColor.withOpacity(0.2)
            : ColorsManager.textGray,
        child: Text(label),
      ),
    );
  }

  Widget _buildActionButton(
      BuildContext context, String text, Color color, VoidCallback onTap) {
    return Expanded(
      child: InkWell(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.all(15),
          decoration: BoxDecoration(
            border: Border(
              top: const BorderSide(color: ColorsManager.textGray),
              left: text == 'Confirm'
                  ? const BorderSide(color: ColorsManager.textGray, width: 0.5)
                  : BorderSide.none,
            ),
          ),
          child: Center(
            child: Text(
              text,
              style: TextStyle(
                  color: color, fontSize: 14, fontWeight: FontWeight.w400),
            ),
          ),
        ),
      ),
    );
  }

  void _selectCity() {
    // Placeholder for the city selection function
    setState(() {
      _selectedCity = 'Selected City';
    });
  }
}