import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/viewModels/contactus/livechat_view_model.dart';
import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/button.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:url_launcher/url_launcher.dart';

class HospitalsLiveChatPage extends StatefulWidget {
  @override
  _HospitalsLiveChatPageState createState() => _HospitalsLiveChatPageState();
}

class _HospitalsLiveChatPageState extends State<HospitalsLiveChatPage> {
  int tappedIndex;
  String chat;

  @override
  void initState() {
    super.initState();
    tappedIndex = -1;
    chat = "";
  }

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return BaseView<LiveChatViewModel>(
      onModelReady: (model) => model.getLiveChatRequestOrders(),
      builder: (_, model, widget) => AppScaffold(
        baseViewModel: model,
        isShowDecPage: false,
        body: SingleChildScrollView(
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Stack(
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(
                          height: 70,
                        ),
                        Container(
                          width: double.infinity,
                          height: 230,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: ExactAssetImage(
                                    'assets/images/dashboard_top_bg.png'),
                                fit: BoxFit.cover),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(
                                  height: projectViewModel.isArabic? 10:20,
                                ),
                                Texts(
                                  TranslationBase.of(context).instructions,
                                  color: Colors.white,
                                  textAlign: TextAlign.start,
                                ),
                                SizedBox(
                                  height:projectViewModel.isArabic?  8:25,
                                ),
                                Texts(
                                  TranslationBase.of(context)
                                          .selectHospitalDec +
                                      " :",
                                  color: Colors.white,
                                  fontWeight: FontWeight.w700,
                                  textAlign: TextAlign.start,
                                ),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(
                          height: MediaQuery.of(context).size.height * 0.85,
                        ),
                        SizedBox(
                          height: 100,
                        ),
                      ],
                    ),
                    Positioned(
                      left: 13,
                      right: 13,
                      top: 200,
                      child: Container(
                        width: double.maxFinite,
                        child: Column(
                          children: [
                            ...List.generate(
                                model.LiveChatModelList.length,
                                (index) => Container(
                                      margin: EdgeInsets.only(
                                          left: 0, right: 0, bottom: 20),
                                      decoration: BoxDecoration(
                                        shape: BoxShape.rectangle,
                                        border: Border.all(
                                            color: Colors.white, width: 0.5),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(5)),
                                        color: tappedIndex == index
                                            ? Theme.of(context).primaryColor
                                            : Colors.white,
                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            InkWell(
                                              onTap: () {
                                                setState(() {
                                                  tappedIndex = index;
                                                  chat = "http://chat.dshmg.com:7788/hmgchatapp/hmgchattest/Index.aspx?Name=${model.user.firstName}&PatientID=${model.user.patientID}&MobileNo=${model.user.mobileNumber}&Language=${projectViewModel.currentLanguage}&WorkGroup=${model.LiveChatModelList[index].value}";
                                                });
                                              },
                                              child: Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceAround,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: <Widget>[
                                                  SizedBox(
                                                    width: 20,
                                                  ),
                                                  Expanded(
                                                      child: Container(
                                                          margin:
                                                              EdgeInsets.only(
                                                                  left: 5,
                                                                  right: 5),
                                                          child: Texts(
                                                            '${model.LiveChatModelList[index].projectName}',
                                                            color:
                                                                tappedIndex ==
                                                                        index
                                                                    ? Colors
                                                                        .white
                                                                    : Colors
                                                                        .black,
                                                            textAlign: TextAlign
                                                                .center,
                                                          ))),
                                                  //model.cOCItemList[index].cOCTitl
                                                  IconButton(
                                                    icon: Icon(
                                                      Icons.arrow_forward_ios,
                                                      color:
                                                          tappedIndex == index
                                                              ? Colors.white
                                                              : Colors.black,
                                                    ),
                                                    tooltip: '',
                                                    onPressed: () {
                                                      setState(() {});
                                                    },
                                                  ),
                                                ],
                                              ),
                                            )
                                          ],
                                        ),
                                      ),
                                    )),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Container(
                  height: MediaQuery.of(context).size.height * 0.20,
                  width: double.maxFinite,
                )
              ],
            ),
          ),
        ),
        bottomSheet: Container(
          height: MediaQuery.of(context).size.height * 0.10,
          width: double.infinity,
          padding: EdgeInsets.all(8.0),
          child: Center(
            child: Container(
              height: MediaQuery.of(context).size.height * 0.07,
              width: MediaQuery.of(context).size.width * 0.8,
              child: SecondaryButton(
                label: TranslationBase.of(context).start,
                loading: model.state == ViewState.BusyLocal,
                textColor: Colors.white,
                disabled: chat.isEmpty,
                onTap: () {
                  launch(chat);
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}