import 'package:design_system/design_system.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/activity_meter/presentation/state/activity_meter_view_model.dart';
import 'package:legacy_shared/legacy_shared.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class ActivitySettingsScreen extends ConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.read(themePortProvider);

    final state = ref.watch(activityMeterViewModelProvider);
    final viewModel = ref.read(activityMeterViewModelProvider.notifier);

    return PageLayout(
      title: 'Ajustes de actividades',
      body: Container(
        color: theme.getColorFor(ThemeCode.backgroundSecondary),
        padding: EdgeInsets.only(top: 12),
        child: Column(
          children: [
            GestureDetector(
              onTap: (){
                showDialog(context: context, builder: (context)=>Dialog(
                  child: TimeEditDialog(
                    pickStartTime: (int index) async {
                      final time = await showTimePicker(
                        context: context,
                        initialTime: const TimeOfDay(hour: 00, minute: 00),
                        builder: (BuildContext context, Widget? child) {
                          return MediaQuery(
                            data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
                            child: child!,
                          );
                        },
                      );

                      viewModel.setStartTime(index, time);
                    },
                    pickEndTime: (int index) async {
                      final time = await showTimePicker(
                        context: context,
                        initialTime: const TimeOfDay(hour: 00, minute: 00),
                        builder: (BuildContext context, Widget? child) {
                          return MediaQuery(
                            data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
                            child: child!,
                          );
                        },
                      );

                      viewModel.setEndTime(index, time);
                    },
                  )
                ));
              },
              child: Container(
                color: theme.getColorFor(ThemeCode.backgroundPrimary),
                padding: SizeUtils.getByScreen(
                  small: EdgeInsets.symmetric(horizontal: 24, vertical: 10),
                  big: EdgeInsets.symmetric(horizontal: 22, vertical: 8),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Icon(Icons.access_time_filled_rounded),
                        SizedBox(width: 8),
                        Text('Ajustar Hora:')
                      ],
                    ),
                    Text('value')
                  ],
                ),
              ),
            ),
            GestureDetector(
              onTap: (){
                showDialog(context: context, builder: (context)=>Dialog(
                  child: NumberEditDialog(
                    title: 'Pasos (cm):',
                    controller: viewModel.stepLengthController,
                    errorMessage: state.errorMessage,
                    onSubmit: () async {
                      await viewModel.updateStepLength();

                      if (state.errorMessage.isEmpty){
                        Navigator.pop(context);
                      }
                    }
                  )
                ));
              },
              child: Container(
                color: theme.getColorFor(ThemeCode.backgroundPrimary),
                padding: SizeUtils.getByScreen(
                  small: EdgeInsets.symmetric(horizontal: 24, vertical: 10),
                  big: EdgeInsets.symmetric(horizontal: 22, vertical: 8),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Icon(SFIcons.foot, size: SizeUtils.getByScreen(small: 20, big: 18)),
                        SizedBox(width: 16),
                        Text('Pasos (cm):')
                      ],
                    ),
                    Text(state.selectedDevice?.carrierStepLength.toString() ?? '0')
                  ],
                ),
              ),
            ),
            GestureDetector(
              onTap: (){
                showDialog(context: context, builder: (context)=>Dialog(
                  child: NumberEditDialog(
                    title: 'Peso (kg):',
                    controller: viewModel.weightController,
                    errorMessage: state.errorMessage,
                    onSubmit: () async {
                      await viewModel.updateWeight();

                      if (state.errorMessage.isEmpty){
                        Navigator.pop(context);
                      }
                    }
                  )
                ));
              },
              child: Container(
                color: theme.getColorFor(ThemeCode.backgroundPrimary),
                padding: SizeUtils.getByScreen(
                  small: EdgeInsets.symmetric(horizontal: 24, vertical: 10),
                  big: EdgeInsets.symmetric(horizontal: 22, vertical: 8),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Icon(SFIcons.scale),
                        SizedBox(width: 8),
                        Text('Peso (kg):')
                      ],
                    ),
                    Text(state.selectedDevice?.carrierWeight.toString() ?? '0')
                  ],
                ),
              ),
            ),
          ],
        ),
      )
    );
  }

}

class TimeEditDialog extends StatelessWidget {

  final Function pickStartTime;
  final Function pickEndTime;

  const TimeEditDialog({
    required this.pickStartTime,
    required this.pickEndTime,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: SizeUtils.getByScreen(small: 320, big: 300),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(6))
      ),
      padding: SizeUtils.getByScreen(
        small: EdgeInsets.symmetric(horizontal: 24, vertical: 32),
        big: EdgeInsets.symmetric(horizontal: 22, vertical: 30),
      ),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topRight,
            child: IconButton(
              padding: EdgeInsets.zero,
              onPressed: (){Navigator.pop(context);},
              icon: Icon(Icons.close, color: Color(0xFF588EA5))
            ),
          ),
          Column(
            children: [
              Text(context.translate('Ajustar hora:').toUpperCase(),
                style: TextStyle(color: Color(0xFF588EA5)),
              ),
              SizedBox(height: 24),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Tiempo 1',
                  style: TextStyle(
                    color: Color(0xFF588EA5),
                  )),
                  GestureDetector(
                    onTap: (){pickStartTime(0);},
                    child: Container(
                      decoration: BoxDecoration(
                        border: const BoxBorder.fromBorderSide(BorderSide(color: Color(0xFF588EA5))),
                        borderRadius: BorderRadius.all(Radius.circular(15))
                      ),
                      padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 38, vertical: 6),
                        big: EdgeInsets.symmetric(horizontal: 36, vertical: 4),
                      ),
                      child: Text('00:00',
                        style: TextStyle(color: Color(0xFF588EA5)),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: (){pickEndTime(0);},
                    child: Container(
                      decoration: BoxDecoration(
                          border: const BoxBorder.fromBorderSide(BorderSide(color: Color(0xFF588EA5))),
                          borderRadius: BorderRadius.all(Radius.circular(15))
                      ),
                      padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 38, vertical: 6),
                        big: EdgeInsets.symmetric(horizontal: 36, vertical: 4),
                      ),
                      child: Text('00:00',
                        style: TextStyle(color: Color(0xFF588EA5)),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 12),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Tiempo 2',
                      style: TextStyle(
                        color: Color(0xFF588EA5),
                      )),
                  GestureDetector(
                    onTap: (){pickStartTime(1);},
                    child: Container(
                      decoration: BoxDecoration(
                          border: const BoxBorder.fromBorderSide(BorderSide(color: Color(0xFF588EA5))),
                          borderRadius: BorderRadius.all(Radius.circular(15))
                      ),
                      padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 38, vertical: 6),
                        big: EdgeInsets.symmetric(horizontal: 36, vertical: 4),
                      ),
                      child: Text('00:00',
                        style: TextStyle(color: Color(0xFF588EA5)),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: (){pickEndTime(1);},
                    child: Container(
                      decoration: BoxDecoration(
                          border: const BoxBorder.fromBorderSide(BorderSide(color: Color(0xFF588EA5))),
                          borderRadius: BorderRadius.all(Radius.circular(15))
                      ),
                      padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 38, vertical: 6),
                        big: EdgeInsets.symmetric(horizontal: 36, vertical: 4),
                      ),
                      child: Text('00:00',
                        style: TextStyle(color: Color(0xFF588EA5)),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 12),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Tiempo 3',
                    style: TextStyle(
                      color: Color(0xFF588EA5),
                    )),
                  GestureDetector(
                    onTap: (){pickStartTime(2);},
                    child: Container(
                      decoration: BoxDecoration(
                        border: const BoxBorder.fromBorderSide(BorderSide(color: Color(0xFF588EA5))),
                        borderRadius: BorderRadius.all(Radius.circular(15))
                      ),
                      padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 38, vertical: 6),
                        big: EdgeInsets.symmetric(horizontal: 36, vertical: 4),
                      ),
                      child: Text('00:00',
                        style: TextStyle(color: Color(0xFF588EA5)),
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: (){pickEndTime(2);},
                    child: Container(
                      decoration: BoxDecoration(
                        border: const BoxBorder.fromBorderSide(BorderSide(color: Color(0xFF588EA5))),
                        borderRadius: BorderRadius.all(Radius.circular(15))
                      ),
                      padding: SizeUtils.getByScreen(
                        small: EdgeInsets.symmetric(horizontal: 38, vertical: 6),
                        big: EdgeInsets.symmetric(horizontal: 36, vertical: 4),
                      ),
                      child: Text('00:00',
                        style: TextStyle(color: Color(0xFF588EA5)),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 12),
              PrimaryButton(
                onPressed: (){

                },
                height: SizeUtils.getByScreen(small: 36, big: 34),
                text: 'Guardar',
                color: Color(0xFF588EA5),
              )
            ],
          )
        ],
      )
    );
  }

}

class NumberEditDialog extends StatelessWidget {

  final String title;
  final TextEditingController controller;
  final VoidCallback onSubmit;
  final String errorMessage;

  const NumberEditDialog({
    required this.title,
    required this.controller,
    required this.onSubmit,
    required this.errorMessage,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: SizeUtils.getByScreen(small: 20, big: 190),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(6))
      ),
      padding: EdgeInsets.only(top: 24),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topRight,
            child: IconButton(
              padding: EdgeInsets.zero,
              onPressed: (){Navigator.pop(context);},
              icon: Icon(Icons.close)
            ),
          ),
          Column(
            children: [
              Text(context.translate(title).toUpperCase()),
              SizedBox(height: 14),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: SizeUtils.getByScreen(small: 16, big: 14)),
                child: TextField(
                  decoration: InputDecoration(
                    border: const OutlineInputBorder(
                      borderSide: BorderSide(color: Color(0xFF4B4B4B)),
                    ),
                  ),
                  keyboardType: TextInputType.number,
                  controller: controller,
                ),
              ),
              if (errorMessage.isNotEmpty) ...[
                const SizedBox(height: 8),
                Text(
                  errorMessage,
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    color: Color.fromRGBO(239, 17, 17, 1),
                    fontSize: 12,
                  ),
                ),
              ],
              SizedBox(height: 8),
              Row(
                children: [
                  Expanded(child: PrimaryButton(
                    height: 50,
                    onPressed: onSubmit,
                    text: 'OK',
                    color: Color(0xFF588EA5),
                    radius: 0,
                  )),
                  SizedBox(width: 8),
                  Expanded(child: PrimaryButton(
                    height: 50,
                    onPressed: (){
                      Navigator.pop(context);
                    },
                    text: context.translate(I18n.legacyCancel),
                    color: Color(0xFF588EA5),
                    radius: 0,
                  )),
                ],
              ),
            ],
          )
        ],
      )
    );
  }

}