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

import 'Data.dart';

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

  @override
  State<ProjectDetails> createState() => _ProjectDetailsState();
}

class _ProjectDetailsState extends State<ProjectDetails> {
  @override
  Widget build(BuildContext context) {

    List<Widget> stepsWidgets = printSteps();
    etaHours =0;
    steps.forEach((element) {
      etaHours+=element.eta;
    });


    return Scaffold(
      appBar: AppBar(title: Row(
        children: [
          FaIcon(FontAwesomeIcons.projectDiagram),
          SizedBox(width: 15,),
          Text('This app'),
        ],
      )),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [

            Card(child:LimitedBox(
              maxHeight: 300,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white10,
                ),
                padding: EdgeInsets.all(10),
                child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: (stepsWidgets.isNotEmpty) ? Container(
                      child: Column(
                        children: stepsWidgets,
                      ),
                    ) : Container(

                        height: 20,
                        child: Text('Click on + to add steps')
                    )),
              ),
            ),),

            Card(child:Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Text('Actions'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      ElevatedButton(onPressed: (){}, child: Row(
                        children: [
                          FaIcon(FontAwesomeIcons.edit),
                          SizedBox(width: 10,),
                          Text('Edit'),
                        ],
                      )),
                      ElevatedButton(style:ElevatedButton.styleFrom(
                        primary: Colors.red,
                      ),onPressed: (){}, child: Row(
                        children: [
                          FaIcon(FontAwesomeIcons.deleteLeft),
                          SizedBox(width: 10,),
                          Text('Delete'),
                        ],
                      ))
                    ],
                  ),
                ],
              ),
            ))
          ],
        ),
      ) ,
    );
  }
  List<Widget> printSteps() {
    List<Widget> _steps = [];

    Widget title=Container(

        height: 30,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.white10),
        padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(flex: 4, child: Text('Name')),
            //  Expanded(flex:1,child: Icon(Icons.timelapse)),
            Expanded(flex: 2, child: Text("Progress")),
            Expanded(
                flex: 3,
                child: Text('ETA',textAlign: TextAlign.end,))
          ],
        ));

    // _steps.add(title);
    // _steps.add(Divider());
    for (int i = 0; i < steps.length; i++) {
      ProjectStep value = steps[i];
      _steps.add(InkWell(
          child: Container(
              height: 30,
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(5), color:Colors.black26),
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 2),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(flex: 4, child: Text(value.stepName)),
                  //  Expanded(flex:1,child: Icon(Icons.timelapse)),
                  Expanded(flex: 1, child: Text("${value.progress}%")),
                  Expanded(
                      flex: 3,
                      child: Text(
                        value.eta.toString() + " Hours",
                        textAlign: TextAlign.end,
                      ))
                ],
              ))));
    }

    return _steps;
  }
}