import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:line_icons/line_icons.dart';
import 'package:teledentistry_baksos/ColorFilter.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:teledentistry_baksos/HomePage.dart';

class KoasCard extends StatelessWidget {
  final String nama;
  final String preseptor;
  final String asal;
  final bool online;

  //// Pointer to Update Function
  final Function onUpdate;
  //// Pointer to Delete Function
  final Function onDelete;

  KoasCard(this.nama, this.asal, this.preseptor, this.online,
      {this.onUpdate, this.onDelete});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        elevation: 10,
        child: InkWell(
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              Ink.image(
                image: NetworkImage(
                  'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1327&q=80',
                ),
                colorFilter: ColorFilters.greyscale,
                height: 200,
                width: 300,
                fit: BoxFit.fitHeight,
              ),
              SizedBox(
                height: 100,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Text(nama,
                      style: GoogleFonts.poppins(
                          fontWeight: FontWeight.w600,
                          fontSize: 16,
                          color: Colors.black)),
                  Text(asal,
                      style: GoogleFonts.poppins(
                          fontWeight: FontWeight.w600,
                          fontSize: 16,
                          color: Colors.black)),
                  Text(preseptor,
                      style: GoogleFonts.poppins(
                          fontWeight: FontWeight.w700,
                          fontSize: 16,
                          color: Colors.black)),
                  Text((online) ? 'online' : 'tdk aktif',
                      style: GoogleFonts.poppins(
                          fontWeight: FontWeight.w500,
                          fontSize: 16,
                          color: Colors.black)),
                ],
              ),
            ],
          ),
          onTap: () {},
        ),
      ),
    );
  }
}

class SelectKoasstl extends StatelessWidget {
  const SelectKoasstl({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SelectKoas(),
    );
  }
}

class SelectKoas extends StatefulWidget {
  const SelectKoas({Key key}) : super(key: key);

  @override
  _SelectKoasState createState() => _SelectKoasState();
}

class _SelectKoasState extends State<SelectKoas> {
  final TextEditingController judulController = TextEditingController();
  final TextEditingController penulisController = TextEditingController();
  final TextEditingController urlgambarController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    FirebaseFirestore firestore = FirebaseFirestore.instance;
    CollectionReference users = firestore.collection('data_koas');
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.teal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                InkWell(
                  child: Padding(
                    padding: EdgeInsets.all(15),
                    child: Icon(LineIcons.arrowCircleLeft,
                        color: Colors.white, size: 36.0),
                  ),
                  onTap: () {
                    Navigator.pushReplacement(context,
                        MaterialPageRoute(builder: (context) {
                      return HomePagestl();
                    }));
                  },
                ),
                Text('Ubah Profile',
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500,
                        color: Colors.white))
              ],
            ),

            //ini pengganti appbar yg di modif
          ),
          Expanded(
            child: Container(
              color: Colors.teal,
              child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        topRight: Radius.circular(25)),
                  ),
                  child: ListView(
                    padding: EdgeInsets.all(16),
                    children: [
                      StreamBuilder(
                          stream: users.snapshots(),
                          builder: (_, snapshot) {
                            if (snapshot.hasData) {
                              if (true) {                         // I want if the data['online'] = true, then return Column executed
                                return Column(
                                  children: snapshot.data.docs
                                      .map<Widget>(
                                        (e) => KoasCard(
                                          'nama : ' + e.data()['nama'],
                                          'preseptor : ' +
                                              e.data()['preseptor'],
                                          e.data()['asal'],
                                          e.data()['online'],
                                          onUpdate: () {},
                                        ),
                                      )
                                      .toList(),
                                );
                              }
                            } else {
                              Text('Loading');

                              SizedBox(
                                height: 10,
                              );
                            }
                          }),
                    ],
                  )),
            ),
          ),
        ],
      ),
    );
  }
}