syncrow-app/lib/features/devices/view/widgets/water_heater/Inching_widget.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class InchingWidget extends StatefulWidget {
  const InchingWidget({super.key, this.onDateTimeChanged});
  final Function(DateTime)? onDateTimeChanged;

  @override
  State<InchingWidget> createState() => _InchingWidgetState();
}

class _InchingWidgetState extends State<InchingWidget> {
  @override
  Widget build(BuildContext context) {
    bool isOn = true; // Boolean state for the ON/OFF toggle
    return Column(
      children: [
        DefaultContainer(
          child: Container(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text(
                      'Inching', // Change text based on state
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    CircleAvatar(
                      backgroundColor: isOn
                          ? ColorsManager.secondaryColor.withOpacity(0.6)
                          : Colors.red.withOpacity(0.6), // Change background color based on state
                      child: const Icon(
                        Icons.power_settings_new,
                        color: ColorsManager.onPrimaryColor, // Change icon color
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                    'Once enabled this feature, each time the device is turned on, it will automatically turn of after a period time as pre-set.'),
              ],
            ),
          ),
        ),
        const Padding(
          padding: EdgeInsets.only(right: 30, left: 30),
          child: Divider(),
        ),
        Container(child: MinuteSecondPicker()),
        const Padding(
          padding: EdgeInsets.only(right: 30, left: 30),
          child: Divider(),
        ),
      ],
    );
  }
}

class MinuteSecondPicker extends StatefulWidget {
  const MinuteSecondPicker({super.key});

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

class _MinuteSecondPickerState extends State<MinuteSecondPicker> {
  int selectedMinute = 0;
  int selectedSecond = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Minutes picker
          Container(
            height: 80,
            width: 100,
            child: CupertinoPicker(
              itemExtent: 40.0,
              scrollController: FixedExtentScrollController(initialItem: selectedMinute),
              onSelectedItemChanged: (int index) {
                setState(() {
                  selectedMinute = index;
                });
              },
              children: List<Widget>.generate(61, (int index) {
                return Center(
                  child: BodyLarge(
                    text: index.toString().padLeft(2, '0'),
                    style: const TextStyle(
                        fontWeight: FontWeight.w400, fontSize: 30, color: Colors.blue),
                  ),
                );
              }),
            ),
          ),
          const Text('M'),
          SizedBox(width: 20),
          // Seconds picker
          Container(
            height: 80,
            width: 100,
            child: CupertinoPicker(
              itemExtent: 40.0,
              scrollController: FixedExtentScrollController(initialItem: selectedSecond),
              onSelectedItemChanged: (int index) {
                setState(() {
                  selectedSecond = index;
                });
              },
              children: List<Widget>.generate(60, (int index) {
                return Center(
                  child: BodyLarge(
                    text: index.toString().padLeft(2, '0'),
                    style: const TextStyle(
                        fontWeight: FontWeight.w400, fontSize: 30, color: Colors.blue),
                  ),
                );
              }),
            ),
          ),
          const Text('S'),
        ],
      ),
    );
  }
}