import 'package:flutter/material.dart';
import 'package:prosappco/src/components/pop_appbar.dart';
import 'package:prosappco/src/components/primary_btn.dart';
import 'package:prosappco/src/models/event_model.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:intl/intl.dart';

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

  @override
  State<CalendarScreen> createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  final _titleController = TextEditingController();
  final _descriptionController = TextEditingController();

  EventoService eventoService = EventoService();
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime today = DateTime.now();
  TimeOfDay? _selectedTime1;
  TimeOfDay? _selectedTime2;

  Future<TimeOfDay?> _selectTime1(BuildContext context) async {
    final TimeOfDay? pickedTime1 = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (pickedTime1 != null) {
      setState(() {
        _selectedTime1 = pickedTime1;
      });
    }
    return pickedTime1;
  }

  Future<TimeOfDay?> _selectTime2(BuildContext context) async {
    final TimeOfDay? pickedTime2 = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (pickedTime2 != null) {
      setState(() {
        _selectedTime2 = pickedTime2;
      });
    }
    return pickedTime2;
  }

  @override
  void initState() {
    super.initState();
  }

  void _onDaySelected(DateTime day, DateTime focusedDay) {
    setState(() {
      today = day;
    });
  }

  void _onFormatChange(CalendarFormat format) {
    setState(() {
      _calendarFormat = format;
    });
  }

  @override
  Widget build(BuildContext context) {
    // DateTime firstDay = today.subtract(Duration(days: 365));
    DateTime lastDay = today.add(const Duration(days: 365));

    return SafeArea(
      child: Scaffold(
        appBar: PopAppbar(
          onPressed: () {
            Navigator.pop(context);
          },
          label: 'Calendario',
        ),
        body: Container(
          child: Column(
            children: [
              Container(
                color: const Color.fromARGB(255, 224, 247, 255),
                child: TableCalendar(
                  locale: 'es_MX',
                  firstDay: DateTime.utc(2010, 10, 16),
                  lastDay: lastDay,
                  focusedDay: today,
                  availableGestures: AvailableGestures.all,
                  onDaySelected: _onDaySelected,
                  selectedDayPredicate: (day) => isSameDay(day, today),
                  calendarFormat: _calendarFormat,
                  onFormatChanged: _onFormatChange,
                  availableCalendarFormats: const {
                    CalendarFormat.month: 'Mes',
                    CalendarFormat.week: 'Semana',
                    CalendarFormat.twoWeeks: '2 Semanas',
                  },
                ),
              ),
              _eventList()
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _showDialog,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  void _showDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
          content: StatefulBuilder(
            builder: (BuildContext context, StateSetter setStateDialog) {
              return SizedBox(
                height: 350,
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            _selectedTime1 == null
                                ? ''
                                : _selectedTime1!.format(context),
                            style: TextStyle(
                              color: Colors.grey[500],
                              fontSize: 12,
                            ),
                          ),
                          _selectedTime2 != null && _selectedTime1 != null
                              ? Text(
                                  ' - ',
                                  style: TextStyle(
                                    color: Colors.grey[500],
                                    fontSize: 12,
                                  ),
                                )
                              : const SizedBox(),
                          Text(
                            _selectedTime2 == null
                                ? ''
                                : _selectedTime2!.format(context),
                            style: TextStyle(
                              color: Colors.grey[500],
                              fontSize: 12,
                            ),
                          ),
                          Text(
                            ' | ',
                            style: TextStyle(
                              color: Colors.grey[500],
                            ),
                          ),
                          Text(
                            DateFormat('dd MMMM yyyy', 'es').format(today),
                            style: const TextStyle(
                              fontSize: 13,
                            ),
                          )
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      child: TextFormField(
                        controller: _titleController,
                        decoration: const InputDecoration(hintText: 'Titulo'),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 20),
                      child: TextFormField(
                        controller: _descriptionController,
                        decoration:
                            const InputDecoration(hintText: 'Descripción'),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(bottom: 40),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SizedBox(
                            width: 80,
                            child: TextFormField(
                              textAlign: TextAlign.center,
                              onTap: () async {
                                var value = await _selectTime1(context);
                                setStateDialog(() {
                                  _selectedTime1 = value;
                                });
                              },
                              readOnly: true,
                              decoration: const InputDecoration(
                                hintText: 'Hora',
                              ),
                              controller: TextEditingController(
                                  text: _selectedTime1 == null
                                      ? ''
                                      : ' ${_selectedTime1!.format(context)}'),
                              style: const TextStyle(fontSize: 15),
                            ),
                          ),
                          const Text(' - '),
                          SizedBox(
                            width: 80,
                            child: TextFormField(
                              textAlign: TextAlign.center,
                              onTap: () async {
                                var value = await _selectTime2(context);
                                setStateDialog(() {
                                  _selectedTime2 = value;
                                });
                              },
                              readOnly: true,
                              decoration: const InputDecoration(
                                hintText: 'Hora',
                              ),
                              controller: TextEditingController(
                                  text: _selectedTime2 == null
                                      ? ''
                                      : ' ${_selectedTime2!.format(context)}'),
                              style: const TextStyle(fontSize: 15),
                            ),
                          ),
                        ],
                      ),
                    ),
                    PrimaryButtom(
                      onPressed: () async {
                        await eventoService
                            .createEvent(
                          _titleController.text,
                          _descriptionController.text,
                          today.toString(),
                          _selectedTime1!.format(context).toString(),
                          _selectedTime2!.format(context).toString(),
                        )
                            .then((value) {
                          Navigator.pop(context);
                          _titleController.text = '';
                          _descriptionController.text = '';
                        });
                      },
                      label: 'Añadir evento',
                    ),
                  ],
                ),
              );
            },
          ),
        );
      },
    );
  }

  Widget _eventList() {
    return FutureBuilder(
      future: getByProId(),
      builder: (BuildContext context, AsyncSnapshot<List<Event>> snapshot) {
        if (!snapshot.hasData) {
          return const Text('No tiene citas');
        }

        List<Event> eventos = [];

        try {
          eventos.addAll(snapshot.data!);
        } catch (e) {
          print("Hola" + e.toString());
        }

        if (eventos.isEmpty) {
          return const Text('No tiene citas');
        }
        return Column(
          children: [
            ...eventos.map(
              (e) => ListTile(
                leading: Text('${e.range1Hour1}'),
                title: Text('${e.title}'),
                trailing: Text('${e.day}'),
              ),
            ),
          ],
        );
      },
    );
  }
}