import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'package:whatsapp_homepage/models/chat_model.dart';

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  Widget chatBox({String url, String time, String titel, String subtitel}) {
    return Card(
      elevation: 4.0,
      child: Container(
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible(
              flex: 2,
              fit: FlexFit.tight,
              child: Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: CircleAvatar(
                  backgroundImage: NetworkImage(url),
                  radius: 30,
                ),
              ),
            ),
            Flexible(
              flex: 6,
              fit: FlexFit.tight,
              child: Align(
                alignment: Alignment.topLeft,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      titel,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text(
                      subtitel,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ),
            Flexible(
              flex: 2,
              fit: FlexFit.loose,
              child: Align(
                alignment: Alignment.topCenter,
                child: Text(time),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: dummyData.length,
        itemBuilder: (context, i) => chatBox(
              url: dummyData[i].avatarUrl,
              titel: dummyData[i].name,
              subtitel: dummyData[i].message,
              time: dummyData[i].time,
            )
        //  new Column(
        //   children: <Widget>[
        //     new Divider(
        //       height: 10.0,
        //     ),
        //     Title(
        //       color: Colors.white,
        //       child: Column(
        //         children: <Widget>[
        //           Padding(
        //             padding: const EdgeInsets.all(15.0),
        //             child: Row(
        //               mainAxisAlignment: MainAxisAlignment.start,
        //               children: <Widget>[
        //                 Align(
        //                   alignment: Alignment.topLeft,
        //                   child: CircleAvatar(
        //                     backgroundImage: NetworkImage(dummyData[i].avatarUrl),
        //                   ),
        //                 ),

        //                 // Title(
        //                 //   color: Colors.grey,
        //                 //   child: Row(
        //                 //       mainAxisAlignment: MainAxisAlignment.spaceAround,
        //                 //       children: <Widget>[
        //                 //         Text(
        //                 //           dummyData[i].name,
        //                 //           style: TextStyle(fontWeight: FontWeight.bold),
        //                 //         ),
        //                 //         Title(
        //                 //             color: Colors.grey,
        //                 //             child: Column(
        //                 //               mainAxisAlignment:
        //                 //                   MainAxisAlignment.spaceAround,
        //                 //               children: <Widget>[
        //                 //                 Text(
        //                 //                   dummyData[i].message,
        //                 //                   style: TextStyle(
        //                 //                       fontWeight: FontWeight.bold),
        //                 //                 ),
        //                 //                 Title(
        //                 //                   color: Colors.white,
        //                 //                   child: Column(
        //                 //                     crossAxisAlignment:
        //                 //                         CrossAxisAlignment.end,
        //                 //                     children: <Widget>[
        //                 //                       Text(dummyData[i].time)
        //                 //                     ],
        //                 //                   ),
        //                 //                 )
        //                 //               ],
        //                 //             )),
        //                 //       ]),
        //                 // ),
        //               ],
        //             ),
        //           ),
        //         ],
        //       ),
        //     ),
        //   ],
        // ),
        );
  }
}