import 'package:customer_service/src/presentation/state/contact_view_model.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';

class ContactScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

    final vm = ref.read(contactViewModelProvider.notifier);
    final viewState = ref.watch(contactViewModelProvider);

    final List<String> country = [
      'España',
      'Portugal',
      'France',
      'Italia',
      'Deutschland',
      context.translate(I18n.other),
    ];

    final List<String> channel = [
      context.translate(I18n.channelOnline),
      context.translate(I18n.channelAmazon),
      context.translate(I18n.channelStore),
      context.translate(I18n.other),
    ];

    return PageLayout(
      title: context.translate(I18n.contactTitle),
      body: Container(
        padding: SizeUtils.getByScreen(
            small: EdgeInsets.symmetric(horizontal: 38),
            big: EdgeInsets.symmetric(horizontal: 36)
        ),
        child: SingleChildScrollView(child: Column(
          children: [
            CustomDropdown(
              items: country.map(Text.new).toList(growable: false),
              onChanged: (x){vm.setCountry(x);},
              hint: context.translate(I18n.selectCountry)
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 18, big: 17)),
            CustomDropdown(
              items: channel.map(Text.new).toList(growable: false),
              onChanged: (x){vm.setChannel(x);},
              hint: context.translate(I18n.selectChannel)
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 18, big: 17)),
            CustomTextField(
              controller: vm.nameController,
              hint: context.translate(I18n.enterName),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 18, big: 17)),
            CustomTextField(
              controller: vm.emailController,
              keyboardType: TextInputType.emailAddress,
              hint: context.translate(I18n.enterEmail),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 18, big: 17)),
            CustomTextField(
              controller: vm.subjectController,
              hint: context.translate(I18n.enterSubject),
            ),
            SizedBox(height: SizeUtils.getByScreen(small: 18, big: 17)),
            CustomTextField(
              controller: vm.bodyController,
              keyboardType: TextInputType.multiline,
              hint: context.translate(I18n.enterMessage),
              lines: 8,
            ),
            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,
                ),
              ),
            ],
          ],
        )),
      ),
      footer: Container(
        padding: SizeUtils.getByScreen(
          small: EdgeInsets.symmetric(horizontal: 38, vertical: 14),
          big: EdgeInsets.symmetric(horizontal: 36, vertical: 12)
        ),
        child: PrimaryButton(
          onPressed: vm.sendEmail,
          text: context.translate(I18n.sendEmail),
          color: theme.getColorFor(ThemeCode.buttonPrimary)
        )
      ),
    );
  }
}