import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:medcify/components/button.dart';
import 'package:medcify/components/loader.dart';
import 'package:medcify/models/timing_item.dart';
import 'package:medcify/pages/main/changeTiming/change_timing_bloc.dart';

import '../../../navigation/navigation.dart';

class ChangeTimingPage extends StatelessWidget {
  const ChangeTimingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.25,
        automaticallyImplyLeading: false,
        title: const Text("Change Timing",style: TextStyle(color: Colors.black,fontSize: 17),),
        leading: IconButton(
          onPressed: (){
            Navigation.instance.goBack();
          },
          icon: const Icon(Icons.keyboard_backspace_rounded,color: Colors.black,),
        ),
      ),
      body: BlocProvider<ChangeTimingCubit>(
        create: (context) => ChangeTimingCubit(),
        child: ProductWidget(),
      ),
    );
  }
}

class ProductWidget extends StatelessWidget {
  late ChangeTimingCubit changeTimingCubit;

  void showCustomDatePicker(BuildContext context, Function(DateTime,int) onDateTimeChanged,int pos){
    showModalBottomSheet(
        constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height / 3
        ),
        context: context,
        builder: (context){
          return CupertinoTheme(
            data: const CupertinoThemeData(
              textTheme: CupertinoTextThemeData(
                dateTimePickerTextStyle: TextStyle(color: Colors.black, fontSize: 16, fontFamily: "Montserrat"),
              ),
            ),
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.time,
              onDateTimeChanged: (val){
                onDateTimeChanged(val,pos);
              },
            ),
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    changeTimingCubit = BlocProvider.of<ChangeTimingCubit>(context);
    changeTimingCubit.fetchTimings();
    return BlocBuilder<ChangeTimingCubit, ChangeTimingState>(
        builder: (context, state) {
          if(state is ChangeTimingLoading){
            return const Loader();
          }else if(state is ChangeTimingFailure){
            return Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.symmetric(horizontal: 24),
              child: Text(state.error,style: TextStyle(color: Colors.grey.shade800, fontSize: 13, height: 1.6),),
            );
          }else{
            return Stack(
              children: [
                (changeTimingCubit.timings.isEmpty) ? Container(
                  alignment: Alignment.center,
                  margin: const EdgeInsets.symmetric(horizontal: 24),
                  child: Text("No data found",style: TextStyle(color: Colors.grey.shade800, fontSize: 13),),
                ) : ListView.builder(
                  itemCount: changeTimingCubit.timings.length,
                  padding: const EdgeInsets.only(top: 16,bottom: 80,left: 16,right: 16),
                  physics: const BouncingScrollPhysics(),
                  itemBuilder: (context, pos){
                    TimingItem timing = changeTimingCubit.timings[pos];
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(timing.day ?? "",style: const TextStyle(color: Colors.black,fontWeight: FontWeight.w500, fontSize: 13),),
                        const SizedBox(height: 16,),
                        Row(
                          children: [
                            Expanded(
                              child: GestureDetector(
                                onTap: (){
                                  showCustomDatePicker(context,changeTimingCubit.onOpeningTimeChanged,pos);
                                },
                                behavior: HitTestBehavior.opaque,
                                child: Container(
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade100,
                                      borderRadius: BorderRadius.circular(4)
                                  ),
                                  padding: const EdgeInsets.symmetric(horizontal: 16,vertical: 16),
                                  alignment: Alignment.centerLeft,
                                  child: Row(
                                    children: [
                                      Text(timing.openingTime ?? "",style: const TextStyle(color: Colors.black,fontSize: 15),),
                                      const Spacer(),
                                      const Icon(Icons.keyboard_arrow_down_rounded,color: Colors.grey,size: 16,),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(width: 8,),
                            Expanded(
                              child: GestureDetector(
                                onTap: (){
                                  showCustomDatePicker(context,changeTimingCubit.onClosingTimeChanged,pos);
                                },
                                behavior: HitTestBehavior.opaque,
                                child: Container(
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade100,
                                      borderRadius: BorderRadius.circular(4)
                                  ),
                                  padding: const EdgeInsets.symmetric(horizontal: 16,vertical: 16),
                                  alignment: Alignment.centerLeft,
                                  child: Row(
                                    children: [
                                      Text(timing.closingTime ?? "",style: const TextStyle(color: Colors.black,fontSize: 15),),
                                      const Spacer(),
                                      const Icon(Icons.keyboard_arrow_down_rounded,color: Colors.grey,size: 16,),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 24,),
                      ],
                    );
                  },
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16,vertical: 4),
                    color: Colors.white,
                    child: Button(
                      text: "Update",
                      onPressed: (){
                        changeTimingCubit.updateTiming();
                      },
                    ),
                  ),
                )
              ],
            );
          }
        }
    );
  }
}