import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:flutter/material.dart';

class BookSuccess extends StatefulWidget {
  @override
  _BookSucceState createState() => _BookSucceState();
}

class _BookSucceState extends State<BookSuccess> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
//      appBar: AppBar(
//        title: Text("Book Success"),
//        bottomOpacity: 0.0,
//        elevation: 0.0,
//        backgroundColor: new Color(0xFF20bc44),
//      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(bottom: 10.0),
              color: new Color(0xFF20bc44),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(top: 40.0),
                    child: Text(TranslationBase.of(context).bookSuccess,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 0.9)),
                  ),
                  Container(
                    margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10.0),
                          child: Image.asset(
                              "assets/images/new-design/check-icon.png",
                              fit: BoxFit.fill,
                              height: 80.0,
                              width: 80.0),
                        ),
                        Container(
                          margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.max,
                            children: <Widget>[
                              Text("Olaya Hospital", style: _getTextStyling()),
                              Container(
                                margin: EdgeInsets.only(top: 5.0),
                                child:
                                    Text("Insurance", style: _getTextStyling()),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 5.0, bottom: 3.0),
                                child: Text("INTERNAL MEDICINE CLINIC",
                                    style: _getTextStyling()),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 5.0, bottom: 3.0),
                                child: Text(
                                    "Thursday, 31 December 2020, 13:15:00",
                                    style: _getTextStyling()),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 5.0, bottom: 3.0),
                                child: Text("Dr. EYAD ISMAIL ABU-JAYAB",
                                    style: _getTextStyling()),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.white, width: 0.5)),
                    margin: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 10.0),
                    child: Table(
                      border: TableBorder(
                          verticalInside:
                              BorderSide(width: 0.5, color: Colors.white)),
                      children: [
                        TableRow(children: [
                          TableCell(child: _getNormalText(TranslationBase.of(context).patientShare)),
                          TableCell(
                              child: _getNormalText(TranslationBase.of(context).patientShareWithTax)),
                        ]),
                        TableRow(children: [
                          TableCell(child: _getHeadingText("SR 35.7")),
                          TableCell(child: _getHeadingText("SR 41.06")),
                        ]),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 30.0, bottom: 40.0),
                  alignment: Alignment.center,
                  child: Text(TranslationBase.of(context).confirmAppo,
                      style: TextStyle(fontSize: 18.0, letterSpacing: 0.8)),
                ),
                Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.only(left: 10.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            _getBulletPoint("1"),
                            Container(
                              child: Text(
                                  "Please confirm the appointment to avoid the cancellation",
                                  overflow: TextOverflow.fade,
                                  style: TextStyle(fontSize: 13.0)),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.only(top: 20.0, left: 10.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            _getBulletPoint("2"),
                            Container(
                              width: MediaQuery.of(context).size.width * 0.8,
                              child: Text(
                                  "The online payment process will be available 24 hours before the appointment.",
                                  overflow: TextOverflow.clip,
                                  style: TextStyle(fontSize: 13.0)),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(50.0, 20.0, 50.0, 20.0),
                  child: Image.asset(
                      "assets/images/new-design/payment-method.png"),
                ),
                Container(
                  alignment: Alignment.bottomCenter,
                  height: MediaQuery.of(context).size.height * 0.32,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      ButtonTheme(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        minWidth: MediaQuery.of(context).size.width * 0.7,
                        height: 45.0,
                        child: RaisedButton(
                          color: new Color(0xFF60686b),
                          textColor: Colors.white,
                          disabledTextColor: Colors.white,
                          disabledColor: new Color(0xFFbcc2c4),
                          onPressed: () {
                          },
                          child:
                              Text(TranslationBase.of(context).confirm.toUpperCase(), style: TextStyle(fontSize: 18.0)),
                        ),
                      ),
                      ButtonTheme(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                        ),
                        minWidth: MediaQuery.of(context).size.width * 0.7,
                        height: 45.0,
                        child: RaisedButton(
                          color: new Color(0xFFc5272d),
                          textColor: Colors.white,
                          disabledTextColor: Colors.white,
                          disabledColor: new Color(0xFFbcc2c4),
                          onPressed: () {
                            navigateToHome(context);
                          },
                          child:
                              Text(TranslationBase.of(context).confirmLater.toUpperCase(), style: TextStyle(fontSize: 18.0)),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _getTextStyling() {
    return TextStyle(fontSize: 14.0, color: Colors.white, letterSpacing: 0.7);
  }

  _getBulletPoint(bulletPoint) {
    return Container(
      margin: EdgeInsets.only(left: 20.0, right: 20.0),
      decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
      width: 20.0,
      height: 20.0,
      child: Center(
        child: Text(bulletPoint,
            style: TextStyle(
              color: Colors.white,
              fontSize: 12.0,
            )),
      ),
    );
  }

  _getHeadingText(text) {
    return Container(
        padding: EdgeInsets.only(bottom: 10.0),
        child: Text(text,
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 26.0,
                fontFamily: 'Open-Sans',
                letterSpacing: 0.5,
                color: Colors.white)));
  }

  Future navigateToHome(context) async {
    Navigator.popUntil(
        context, ModalRoute.withName('/'));
  }

  _getNormalText(text) {
    return Container(
      margin: EdgeInsets.only(top: 5.0),
      padding: EdgeInsets.only(top: 5.0, bottom: 5.0),
      child: Text(text,
          textAlign: TextAlign.center,
          style: TextStyle(
              fontSize: 12,
              fontFamily: 'Open-Sans',
              letterSpacing: 0.5,
              color: Colors.white)),
    );
  }
}
