import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:klar_flutter/components/layout.dart';
import 'package:klar_flutter/components/mainCtaButton.dart';
import 'package:klar_flutter/components/textStyles.dart';
import 'package:klar_flutter/screens/card_activation/card_number.dart';
import 'package:klar_flutter/screens/mainNavigator/mainNavigator.dart';
import 'dart:math';

import 'package:klar_flutter/utils/routeBuilder.dart';

class ActivateCard extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() {
      Navigator.of(context).replaceRouteBelow(anchorRoute: ModalRoute.of(context));
      return;
    }, []);
    final String arguments = ModalRoute.of(context).settings.arguments;
    final currentScreen = useState(arguments != null ? arguments : 'Home');
    final isOpen = useState(false);

    var screenWidth = MediaQuery.of(context).size.width;

    return Container(
      color: Colors.white,
      child: Stack(children: <Widget>[
        Positioned(
            right: 60,
            top: 60,
            child: Transform.rotate(
                angle: -pi / 6,
                child:
                Image.asset('images/card.png', width: screenWidth * 0.35))
        ),
        StandardScreen(
          color: Colors.transparent,
          showBackButton: false,
          bottomNavigationBar: bottomBar(context, currentScreen, isOpen),
          body: Container(
            height: MediaQuery.of(context).size.height * 0.6,
            padding: const EdgeInsets.symmetric(horizontal: 19.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Image.asset(
                  "images/logo.png",
                  width: 96,
                  height: 26,
                ),
                Padding(
                  padding: EdgeInsets.only(top: 27),
                  child: H1(
                      'Tu tarjeta',
                      paddingBottom: 0
                  ),
                ),
                H1(
                  'esta en camino',
                  paddingBottom: 0,
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 24),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 6),
                        child: Point(),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 23),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width - 90,
                              child: RichText(
                                text: TextSpan(
                                  style: TextStyle(fontSize: 16, color: Colors.black),
                                  children: <TextSpan>[
                                    TextSpan(text: 'Tu tarjeta ha sido enviada a tu domicilio. Puedes ver el status del envio aqui:'),
                                    TextSpan(text: ' ups.status.envio.link', style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).primaryColor))
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 24),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 6),
                        child: Point(),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 23),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width - 90,
                              child: RichText(
                                text: TextSpan(
                                  style: TextStyle(fontSize: 16, color: Colors.black),
                                  children: <TextSpan>[
                                    TextSpan(text: 'Activa tu tarjeta, y tu cuenta KLAR estara lista para usar'),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),

              ],
            ),
          ),
          footer:
              PositionedCtaButton(
                hide: true,
                text: 'home.waitingCard.activate',
                onPressed: () => goTo(context, CardNumber()),
              )
              /*CTAButton(text: 'home.waitingCard.activate', onPressed: () {}),*/
        )
      ]),
    );
  }
}

class Point extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 10,
      width: 10,
      decoration: BoxDecoration(
          shape: BoxShape.circle, color: Color.fromRGBO(44, 213, 196, 1)),
    );
  }
}