import 'package:customer_service/src/presentation/contact_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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';
import 'package:url_launcher/url_launcher.dart';

class CustomerServiceScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

    return PageLayout(
      title: context.translate(I18n.customerService),
      body: Container(
        padding: SizeUtils.getByScreen(
            small: EdgeInsets.symmetric(horizontal: 18),
            big: EdgeInsets.symmetric(horizontal: 16)
        ),
        child: Column(
          children: [
            SectionButton(
              onPressed: () async {
                final Uri url = Uri.parse('https://www.savefamilygps.com/');
                if (!await launchUrl(url)) {
                  throw Exception('Could not launch $url');
                }
              },
              image: 'assets/images/ui/iso_sf.png',
              text: context.translate(I18n.supportWebsite)
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 10, big: 9)),
            SectionButton(
              onPressed: () async {
                final Uri url = Uri.parse('https://savefamilygpshelp.zendesk.com/hc/es');
                if (!await launchUrl(url)) {
                  throw Exception('Could not launch $url');
                }
              },
              icon: SFIcons.handshake,
              text: context.translate(I18n.supportHelp)
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 10, big: 9)),
            SectionButton(
                onPressed: (){Navigator.push(context,
                    MaterialPageRoute(
                      builder: (_) => ContactScreen(navigationContract: navigationContract),
                    ));},
                icon: Icons.email_outlined,
                text: context.translate(I18n.contactTitle)
            ),
          ],
        )
      )
    );
  }
}


class SectionButton extends ConsumerWidget {

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

  const SectionButton({
    required this.onPressed,
    this.icon,
    this.image,
    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: 16),
          big: EdgeInsets.symmetric(horizontal: 21, vertical: 12)
        ),
        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: 12, big: 16)),
              child: icon != null
                ?Icon(icon,
                  size: SizeUtils.getByScreen(small: 44, big: 48),
                  color: Color(0xFF588EA5),
                  weight: 30,
                )
              : Image.asset(image!,
                width: SizeUtils.getByScreen(small: 44, big: 48),
                height: SizeUtils.getByScreen(small: 44, big: 48),
              ),
            ),
            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
                )
              )
            ),
          ],
        ),
      )
    );
  }
}