import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/locate_device/presentation/state/locate_device_view_model.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';
import 'package:legacy_shared/legacy_shared.dart';

class LocateDeviceScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const LocateDeviceScreen({super.key, required this.navigationContract});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return PageLayout(
      title: context.translate('Find your device'),
      body: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 16),
          big: EdgeInsets.symmetric(horizontal: 15)
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(context.translate('Locate your SaveFamily in nearby locations'),
              style: TextStyle(
                fontSize: SizeUtils.getByScreen(small: 18, big: 17),
                fontWeight: FontWeight.w500,
              )
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 10, big: 8)),
            Text('This function allows you to find the device indoors or in places close to you. When you press the button, the smartwatch will start beeping and you will be able to hear it.',
              style: TextStyle(
                fontSize: 16
              ))
          ],
        ),
      ),
      footer: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(vertical: 12, horizontal: 26),
          big: EdgeInsets.symmetric(vertical: 10, horizontal: 25)
        ),
        child: PrimaryButton(
          onPressed: () {
            showDialog(context: context, builder: (context)=>Dialog(
              child: LocateDialog(),
            ));
          },
          text: context.translate('Locate my SaveFamily'),
          color: Color(0xFF588EA5),
          height: SizeUtils.getByScreen(small: 36, big: 35),
        ),
      )
    );
  }
}

class LocateDialog extends ConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final viewModel = ref.read(locateDeviceViewModelProvider.notifier);
    final viewState = ref.watch(locateDeviceViewModelProvider);

    return Container(
      padding: SizeUtils.getByScreen(
        small: EdgeInsets.symmetric(horizontal: 32, vertical: 30),
        big: EdgeInsets.symmetric(horizontal: 30, vertical: 28)
      ),
      width: SizeUtils.getByScreen(small: 360, big: 350),
      height: SizeUtils.getByScreen(small: 210, big: 205),
      child: Column(
        children: [
          if (viewState.isLoading)
            Expanded(child: Center(child: Text(context.translate('Sending...'),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: SizeUtils.getByScreen(small: 25, big: 24),
              ),
            ))),
          if (viewState.isComplete)
            Expanded(child: Center(child: Text(context.translate('Sent successfully'),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: SizeUtils.getByScreen(small: 25, big: 24),
              ),
            ))),
          if (viewState.errorMessage.isNotEmpty) ...[
            Expanded(child: Center(child: Text(context.translate('The device is not connected to the Internet'),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: SizeUtils.getByScreen(small: 20, big: 19),
              ),
            ))),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 23)),
            Expanded(child: PrimaryButton(
              onPressed: (){
                Navigator.pop(context);
                viewModel.endLocation();
              },
              text: context.translate('OK'),
              color: Color(0xFF588EA5),
              height: SizeUtils.getByScreen(small: 38, big: 36),
              radius: SizeUtils.getByScreen(small: 32, big: 34),
            )),
          ],
          if (!viewState.isComplete && !viewState.isLoading && viewState.errorMessage.isEmpty) ...[
            Text(context.translate('You are going to activate the remote location of your device. It will start ringing.'),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: SizeUtils.getByScreen(small: 19, big: 18),
              ),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 24, big: 23)),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(child: PrimaryButton(
                  onPressed: (){Navigator.pop(context);},
                  text: context.translate(I18n.legacyCancel),
                  color: Color(0xFF588EA5),
                  height: SizeUtils.getByScreen(small: 38, big: 36),
                  radius: SizeUtils.getByScreen(small: 32, big: 34),
                )),
                SizedBox(width: SizeUtils.getByScreen(small: 4, big: 16)),
                Expanded(child: PrimaryButton(
                  onPressed: () {
                    viewModel.locateDevice();
                  },
                  text: context.translate(I18n.accept),
                  color: Color(0xFF588EA5),
                  height: SizeUtils.getByScreen(small: 38, big: 36),
                  radius: SizeUtils.getByScreen(small: 32, big: 34),
                ))
              ],
            )
          ]
        ],
      ),
    );
  }

}