import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/Appointments/AppoimentAllHistoryResultList.dart';
import 'package:diplomaticquarterapp/pages/MyAppointments/AppointmentDetails.dart';
import 'package:diplomaticquarterapp/uitl/date_uitl.dart';
import 'package:diplomaticquarterapp/widgets/avatar/large_avatar.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class TimeLineWidget extends StatelessWidget {
  final bool isUp;
  final AppoitmentAllHistoryResultList appoitmentAllHistoryResul;

  TimeLineWidget({Key key, this.isUp, this.appoitmentAllHistoryResul});

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);
    return Stack(
      children: <Widget>[
        Container(
          width: 140,
          height: 190,
          color: Colors.transparent,
          child: Center(
            child: Divider(
              color: Colors.white,
              height: 2,
              thickness: 2,
            ),
          ),
        ),
        if (isUp)
          Positioned(
            top: projectViewModel.isArabic ? 15 : 18,
            child: Container(
              margin: EdgeInsets.only(left: 2, right: 2),
              child: Column(
                children: <Widget>[
                  Texts(
                    appoitmentAllHistoryResul.doctorNameObj,
                    color: Colors.white,
                    fontSize: 10.5,
                    fontWeight: FontWeight.normal,
                  ),
                  SizedBox(
                    height: 3,
                  ),
                  LargeAvatar(
                    onTap: () {
                      //AppointmentDetails
                      Navigator.push(
                          context,
                          FadePage(
                              page: AppointmentDetails(
                            appo: appoitmentAllHistoryResul,
                          )));
                    },
                    name: appoitmentAllHistoryResul.doctorNameObj,
                    url: appoitmentAllHistoryResul.doctorImageURL,
                    width: 30,
                    height: 30,
                  ),
                  Container(
                    height: 20,
                    width: 2,
                    color: Colors.white,
                  ),
                  Container(
                    width: 15,
                    height: 15,
                    decoration: BoxDecoration(
                      color: Colors.yellow[700],
                      border: Border.all(color: Colors.yellow[700], width: 2),
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(
                        Radius.circular(25.0),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  Texts(
                    DateUtil.getMonthDayYearLangDateFormatted(
                        DateUtil.convertStringToDate(
                            appoitmentAllHistoryResul.appointmentDate),
                        projectViewModel.isArabic ? "ar" : "en"),
                    color: Colors.white,
                    fontSize: 12.5,
                    fontWeight: FontWeight.normal,
                  ),
                  Texts(
                    appoitmentAllHistoryResul.clinicName,
                    color: Colors.white,
                    fontSize: 12.5,
                    fontWeight: FontWeight.normal,
                  )
                ],
              ),
            ),
          )
        else
          Positioned(
            top: projectViewModel.isArabic ? 35 : 50,
            child: Container(
              margin: EdgeInsets.only(left: 2, right: 2),
              child: Column(
                children: <Widget>[
                  Texts(
                    appoitmentAllHistoryResul.clinicName.trim(),
                    color: Colors.white,
                    fontSize: 12.5,
                    fontWeight: FontWeight.normal,
                  ),
                  Texts(
                    DateUtil.getMonthDayYearLangDateFormatted(
                        DateUtil.convertStringToDate(
                            appoitmentAllHistoryResul.appointmentDate),
                        projectViewModel.isArabic ? "ar" : "en"),
                    color: Colors.white,
                    fontSize: 12.5,
                    fontWeight: FontWeight.normal,
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Container(
                    width: 15,
                    height: 15,
                    decoration: BoxDecoration(
                      color: Colors.yellow[700],
                      border: Border.all(color: Colors.yellow[700], width: 2),
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.all(
                        Radius.circular(25.0),
                      ),
                    ),
                  ),
                  Container(
                    height: 20,
                    width: 2,
                    color: Colors.white,
                  ),
                  LargeAvatar(
                    onTap: () {
                      Navigator.push(
                          context,
                          FadePage(
                              page: AppointmentDetails(
                            appo: appoitmentAllHistoryResul,
                          )));
                    },
                    name: appoitmentAllHistoryResul.doctorNameObj,
                    url: appoitmentAllHistoryResul.doctorImageURL,
                    width: 30,
                    height: 30,
                  ),
                  SizedBox(
                    height: 3,
                  ),
                  Texts(
                    appoitmentAllHistoryResul.doctorNameObj.trim(),
                    color: Colors.white,
                    fontSize: 10.5,
                    fontWeight: FontWeight.normal,
                  ),
                ],
              ),
            ),
          ),
        Container()
      ],
    );
  }
}