import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:functions/src/features/functions/state/call_watch_view_model.dart';
import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';

class CallWatchDialog extends ConsumerWidget {

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

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

    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('Call watch'),
                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('Main contact phone number'),
            keyboardType: TextInputType.number,
          ),
          if (viewState.errorMessage.isNotEmpty)
            Padding(
              padding: const EdgeInsets.only(top: 12),
              child: Text(
                viewState.errorMessage,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Theme.of(context).colorScheme.error,
                  fontSize: 13,
                ),
              ),
            ),
          SizedBox(height: SizeUtils.getByScreen(small: 28, big: 27)),
          PrimaryButton(
            onPressed: viewModel.call,
            text: context.translate('Call me'),
            color: Color(0xFF588EA5),
            height: SizeUtils.getByScreen(small: 38, big: 36),
            radius: SizeUtils.getByScreen(small: 32, big: 34),
          ),
        ],
      ),
    );
  }

}