import 'package:cssd/config/colors.dart';
import 'package:cssd/utils/scan.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';

import '../../config/routes.dart';
import '../../providers/connectivity.dart';
import '../../widgets/Global/internet_error.dart';

class CycleScanScreen extends StatefulWidget {
  // static const route = '/cycleScanScreen';
  @override
  State<StatefulWidget> createState() {
    return _CycleScanScreenState();
  }
}

class _CycleScanScreenState extends State<CycleScanScreen> {
  String testCode = "";
  TextEditingController idCTRL = new TextEditingController();
  final _form = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    final _media = MediaQuery.of(context);
    // final double _pixelRatio = (_media.size.height / _media.size.width * 7 / 5);
    final double _devicewidth = _media.size.width;
    final double _deviceBlockSize = _devicewidth / 100;
    return SafeArea(
      child: GestureDetector(
        onTap: () {
          FocusManager.instance.primaryFocus?.unfocus();
        },
        child: Scaffold(
          appBar: AppBar(
            titleSpacing: -10,
            title: Text(
              'Cycles',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            backgroundColor: Colors.black,
            leading: IconButton(
              icon: Icon(
                Icons.keyboard_arrow_left,
                color: Colors.white,
                size: 35,
              ),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ),
          body: Consumer<ConnectivityProvider>(
            builder: (ct, connection, _) {
              return connection.conStatus != 'offline'
                  ? ListView(
                      padding: EdgeInsets.symmetric(horizontal: 20),
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.only(top: 30),
                          child: Text(
                            'Looking for a Cycle?',
                            textAlign: TextAlign.left,
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 5.5 * _deviceBlockSize,
                              fontWeight: FontWeight.w700,
                              letterSpacing: 3,
                            ),
                          ),
                        ),
                        GestureDetector(
                          child: Container(
                            margin: EdgeInsets.symmetric(vertical: 10),
                            height: 200,
                            decoration: BoxDecoration(border: Border.all()),
                            child: Center(
                              child: Text(
                                'Please Scan The Cycle Barcode',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 5 * _deviceBlockSize,
                                  fontWeight: FontWeight.w100,
                                  letterSpacing: 3,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            ),
                          ),
                          onTap: () {
                            scan().then(
                              (String result) {
                                if (result == 'cancel') {
                                  print('cancel');
                                } else if (result == 'error') {
                                  print('error');
                                } else if (result == 'access') {
                                  print('access');
                                } else {
                                  launch(
                                    'https://cssd-doc.com/Show/Cycle/$result',
                                  );
                                  // Navigator.of(context).pushNamed(
                                  //   Routes.cycleDetailScreen,
                                  //   arguments: result,
                                  // );
                                }
                              },
                            );
                          },
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Form(
                          key: _form,
                          child: TextFormField(
                            validator: (val) {
                              if (val!.isEmpty) {
                                return 'Id required!!';
                              }
                              return null;
                            },
                            controller: idCTRL,
                            decoration: InputDecoration(
                              icon: Icon(
                                FontAwesomeIcons.sortNumericDown,
                                size: 6 * _deviceBlockSize,
                              ),
                              labelStyle: TextStyle(
                                fontWeight: FontWeight.w100,
                                fontSize: 4 * _deviceBlockSize,
                              ),
                              isDense: true,
                              labelText: 'Or enter a cycle ID',
                              contentPadding: EdgeInsets.symmetric(
                                vertical: 2,
                                horizontal: 3,
                              ),
                              focusedBorder: UnderlineInputBorder(
                                // borderRadius: BorderRadius.only(Radius.circular(4)),
                                borderSide: BorderSide(
                                  color: Colors.grey,
                                ),
                              ),
                            ),
                            style: TextStyle(
                              fontWeight: FontWeight.w700,
                              fontSize: 5 * _deviceBlockSize,
                            ),
                            keyboardType: TextInputType.number,
                          ),
                        ),
                        SizedBox(
                          height: 70,
                        ),
                        InkWell(
                          onTap: () {
                            if (!_form.currentState!.validate()) {
                              return;
                            }
                            launch(
                              'https://cssd-doc.com/Show/Cycle/${idCTRL.text}',
                            );
                            // Navigator.of(context).pushNamed(
                            //   Routes.cycleDetailScreen,
                            //   arguments: idCTRL.text,
                            // );
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(
                              horizontal: 5 * _deviceBlockSize,
                              vertical: 10,
                            ),
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [kPink, kPinkSub],
                              ),
                              borderRadius: BorderRadius.circular(7),
                            ),
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                'Search',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 5 * _deviceBlockSize,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    )
                  : ConnectionErrorBox();
            },
          ),
        ),
      ),
    );
  }
}