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

class CreateSchedule extends StatefulWidget {
  final List<Map<String, String>> days;
  final void Function(List<String> selectedDays)? selectDays; // Callback for selected days
  final Function(DateTime) onDateTimeChanged;
  final void Function(bool isOn)? onToggleChanged; // Callback for toggle state

  const CreateSchedule({
    Key? key,
    required this.days,
    required this.selectDays,
    required this.onDateTimeChanged,
    this.onToggleChanged, // Optional callback
  }) : super(key: key);

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

class _CreateScheduleState extends State<CreateSchedule> {
  List<String> selectedDays = []; // List of selected days
  bool isOn = true; // Boolean state for the ON/OFF toggle

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
      child: Column(
        children: <Widget>[
          const Divider(
            color: ColorsManager.greyColor,
          ),
          SizedBox(
            height: 110,
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.time,
              initialDateTime: DateTime.now(),
              onDateTimeChanged: widget.onDateTimeChanged,
            ),
          ),
          const Divider(
            color: ColorsManager.greyColor,
          ),
          const SizedBox(height: 20),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.08,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: widget.days.map((day) {
                bool isSelected = selectedDays.contains(day['day']); // Check if day is selected
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        if (isSelected) {
                          selectedDays.remove(day['day']); // Deselect day
                        } else {
                          selectedDays.add(day['day']!); // Select day
                        }
                        if (widget.selectDays != null) {
                          widget.selectDays!(selectedDays);
                        }
                      });
                    },
                    child: Container(
                      width: 50,
                      padding: const EdgeInsets.symmetric(
                          vertical: 8, horizontal: 8),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: isSelected
                              ? Colors.black
                              : ColorsManager.grayColor,
                        ),
                        color: Colors.transparent,
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: Center(
                        child: Text(
                          day['day']!,
                          style: TextStyle(
                            fontSize: 13,
                            color: isSelected
                                ? Colors.black
                                : ColorsManager.grayColor,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          const SizedBox(height: 20),
          InkWell(
            onTap: () {
              setState(() {
                isOn = !isOn; // Toggle the state
                if (widget.onToggleChanged != null) {
                  widget.onToggleChanged!(isOn); // Pass the new toggle state
                }
              });
            },
            child: DefaultContainer(
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    isOn ? 'ON' : 'OFF', // Change text based on state
                    style: const 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
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}