// import 'package:account/src/features/linked_devices/presentation/app_users_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/remote_connection/presentation/remote_camera_screen.dart';
import 'package:functions/src/features/remote_connection/presentation/state/remote_connection_view_model.dart';
import 'package:legacy_shared/legacy_shared.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class RemoteConnectionScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

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

    return PageLayout(
      title: 'Remote Connection',
      body: SingleChildScrollView(child: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 22, vertical: 10),
          big: EdgeInsets.symmetric(horizontal: 21, vertical: 8)
        ),
        child: Column(
          children: [
            AppSectionButton(
              onPressed: (){Navigator.push(context, MaterialPageRoute(
                builder: (_)=>RemoteCameraScreen(navigationContract: navigationContract)
              ));},
              icon: Icons.photo_camera_outlined,
              text: 'Remote camera'
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 16, big: 15)),
            AppSectionButton(
              onPressed: (){showDialog(context: context, builder: (context)=>Dialog(
                child: CallDialog(
                )
              ));},
              icon: SFIcons.listen,
              text: 'Remote listening'
            ),
          ],
        ),
      )),
    );
  }
}

class CallDialog extends ConsumerWidget {

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

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

    return Container(
      padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 26, vertical: 20),
          big: EdgeInsets.symmetric(horizontal: 24, vertical: 18)
      ),
      width: SizeUtils.getByScreen(small: 390, big: 380),
      height: SizeUtils.getByScreen(small: 250, big: 243),
      child: Column(
        children: [
          Stack(
            children: [
              Center(child: Text(context.translate('Remote listening'),
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: SizeUtils.getByScreen(small: 19, big: 18)),
              )),
              Align(
                  alignment: Alignment.centerRight,
                  child: IconButton(
                    onPressed: (){Navigator.pop(context);},
                    icon: Icon(Icons.close, color: Color(0xFF588EA5)),
                  )
              )
            ],
          ),
          SizedBox(height: SizeUtils.getByScreen(small: 8, big: 7)),
          CustomTextField(
            controller: viewModel.phoneController,
            hint: context.translate('Insert your phone number'),
            keyboardType: TextInputType.number,
          ),
          if (viewState.errorMessage.isNotEmpty) ...[
            const SizedBox(height: 4),
            Text(
              viewState.errorMessage,
              textAlign: TextAlign.center,
              style: const TextStyle(
                color: Color.fromRGBO(239, 17, 17, 1),
                fontSize: 12,
              ),
            ),
          ],
          SizedBox(height: SizeUtils.getByScreen(small: 28, big: 27)),
          PrimaryButton(
            onPressed: () async {
              await viewModel.call();
              if (viewState.errorMessage.isEmpty){
                Navigator.pop(context);
              }
            },
            text: context.translate('Call me'),
            color: Color(0xFF588EA5),
            height: SizeUtils.getByScreen(small: 38, big: 36),
            radius: SizeUtils.getByScreen(small: 32, big: 34),
          ),
        ],
      ),
    );
  }

}

class AppSectionButton extends ConsumerWidget {

  final GestureTapCallback onPressed;
  final IconData icon;
  final String text;

  const AppSectionButton({
    required this.onPressed,
    required this.icon,
    required this.text,
  });

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

    return GestureDetector(
        onTap: onPressed,
        child: Container(
          padding: SizeUtils.getByScreen(
            small: EdgeInsets.symmetric(horizontal: 22, vertical: 20),
            big: EdgeInsets.symmetric(horizontal: 21, vertical: 18)
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(SizeUtils.getByScreen(small: 12, big: 18))),
            color: theme.getColorFor(ThemeCode.backgroundSecondary),
          ),
          child: Row(
            children: [
              Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: theme.getColorFor(ThemeCode.backgroundPrimary),
                ),
                padding: EdgeInsets.all(SizeUtils.getByScreen(small: 4, big: 12)),
                child: Icon(icon,
                  size: SizeUtils.getByScreen(small: 40, big: 44),
                  color: Color(0xFF588EA5),
                  weight: 30,
                ),
              ),
              SizedBox(width: SizeUtils.getByScreen(small: 16, big: 15)),
              Expanded(
                  child: Text(context.translate(text),
                      style: TextStyle(
                          fontSize: SizeUtils.getByScreen(small: 18, big: 19),
                          fontWeight: FontWeight.w500
                      )
                  )
              )
            ],
          ),
        )
    );
  }
}