import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
// import 'package:intl/intl.dart';

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

  @override
  Widget build(BuildContext context) {
    final List<Data> items = [
      Data(
          type: 'Foods & Drinks',
          color: Color(0xffCCA600),
          image: 'assets/images/food.png'),
      Data(
          type: 'Services',
          color: Color(0xff90D8F9),
          image: 'assets/images/service.png'),
      Data(
          type: 'Additional',
          color: Color(0xffAACEE0),
          image: 'assets/images/additional.png'),
      Data(
          type: 'First Aid',
          color: Color(0xffFF1111),
          image: 'assets/images/firstaid.png'),
      Data(
          type: 'Ticket',
          color: Color(0xff5ED8F6),
          image: 'assets/images/ticket.png'),
      Data(
          type: 'Vacation',
          color: Color(0xffCCA600),
          image: 'assets/images/vacation.png'),
      Data(
          type: 'Transportation',
          color: Color(0xff6C8BA5),
          image: 'assets/images/transportation.png'),
    ];
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff078C84),
          automaticallyImplyLeading: false,
          toolbarHeight: 44,
          title: Text(
            // date,
            '${date.hour}:${date.minute}',
            style: TextStyle(color: Colors.white, fontSize: 15),
          ),
          actions: [
            Icon(
              Icons.signal_cellular_alt,
              color: Colors.white,
            ),
            Icon(
              Icons.wifi,
              color: Colors.white,
            ),
            RotatedBox(
              quarterTurns: -3,
              child: Icon(
                Icons.battery_std,
                color: Colors.white,
              ),
            )
          ],
        ),
        body: Stack(children: [
          Container(
            decoration: BoxDecoration(color: Color(0xff078C84)),
          ),
          SingleChildScrollView(
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16),
                      topRight: Radius.circular(16)),
                  border: Border.all(color: Color(0xff078C84))),
              child: Column(
                children: [
                  TopMenu(),
                  Column(
                    children: List.generate(
                        items.length,
                        (i) => SizedBox(
                              child: ListTile(
                                leading: gambar(items[i]),
                                title: Text(items[i].type),
                                subtitle: Text(
                                    'Description of ${items[i].type.toLowerCase()}'),
                                trailing: IconDelete(),
                              ),
                            )),
                  ),
                  Divider(
                    thickness: 8,
                  ),
                  AvailableMenu(),
                  Column(
                    children: List.generate(
                        items.length,
                        (i) => SizedBox(
                              child: ListTile(
                                leading: gambar(items[i]),
                                title: Text(items[i].type),
                                subtitle: Text(
                                    'Description of ${items[i].type.toLowerCase()}'),
                                trailing: IconAdd(),
                              ),
                            )),
                  )
                ],
              ),
            ),
          ),
        ]));
  }

  Container gambar(Data items) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(color: items.color),
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: items.color.withOpacity(0.4)),
      padding: const EdgeInsets.all(5.0),
      child: Image.asset(
        items.image,
        width: 36,
        height: 36,
        fit: BoxFit.cover,
      ),
    );
  }
}

class Data {
  String type;
  Color color;
  String image;

  Data({required this.type, required this.color, required this.image});
}

// DateTime now = DateTime.now();
// String date = DateFormat('kk:mm').format(now);
var date = DateTime.now();

class AvailableMenu extends StatelessWidget {
  const AvailableMenu({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5.0),
      child: Row(
        children: [
          Text(
            'Available Menu',
            textAlign: TextAlign.left,
            style: TextStyle(
                fontWeight: FontWeight.bold, color: Color(0xff292D32)),
          ),
        ],
      ),
    );
  }
}

class TopMenu extends StatelessWidget {
  const TopMenu({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(5.0),
      child: Row(
        children: [
          Text(
            'Top Menu',
            textAlign: TextAlign.left,
            style: TextStyle(
                fontWeight: FontWeight.bold, color: Color(0xff292D32)),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  color: Color(0xff292D32).withOpacity(0.15),
                  height: 1,
                  width: 24,
                ),
              ],
            ),
          ),
          ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff078C84).withOpacity(0.1)),
              onPressed: () => context.go('/listblock'),
              child: Text(
                'Done',
                style: TextStyle(
                    color: Color(0xff078C84), fontWeight: FontWeight.w300),
              ))
        ],
      ),
    );
  }
}

class IconAdd extends StatelessWidget {
  const IconAdd({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Icon(
      Icons.add_circle,
      color: Colors.red,
    );
  }
}

class IconDelete extends StatelessWidget {
  const IconDelete({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(
          Icons.remove_circle,
          color: Colors.red,
        ),
        SizedBox(width: 10),
        Icon(Icons.menu),
      ],
    );
  }
}