import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:namer_app/data.dart';
import 'package:date_format/date_format.dart';

var date = formatDate(DateTime.now(), [HH, ':', nn]);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff078C84),
          automaticallyImplyLeading: false,
          elevation: 0,
          toolbarHeight: 44,
          title: Text(
            date,
            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: [
                  Container(
                    margin: EdgeInsets.symmetric(vertical: 5),
                    color: Color(0xff292D32).withOpacity(0.15),
                    height: 1,
                    width: 24,
                  ),
                  TopMenu(),
                  Column(
                    children: List.generate(
                        7,
                        (i) => SizedBox(
                              child: ListTile(
                                leading: SizedBox(
                                  width: 60,
                                  height: 60,
                                  child: gambar(items[i]),
                                ),
                                title: Text(items[i]['type']),
                                subtitle: Text(
                                    'Description of ${items[i]['type'].toLowerCase()}'),
                                trailing: IconDelete(
                                  items: items[i],
                                ),
                              ),
                            )),
                  ),
                  Divider(
                    thickness: 8,
                  ),
                  AvailableMenu(),
                  Column(
                    children: List.generate(
                        items.length,
                        (i) => SizedBox(
                              child: ListTile(
                                leading: SizedBox(
                                  width: 60,
                                  height: 60,
                                  child: gambar(items[i]),
                                ),
                                title: Text(items[i]['type']),
                                subtitle: Text(
                                    'Description of ${items[i]['type'].toLowerCase()}'),
                                trailing: IconAdd(),
                              ),
                            )),
                  )
                ],
              ),
            ),
          ),
        ]));
  }

  Container gambar(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'],
        fit: BoxFit.cover,
      ),
    );
  }
}

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)),
          ),
          Spacer(),
          ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff078C84).withOpacity(0.1)),
              onPressed: () => context.go('/list/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 IconButton(
      color: Colors.red,
      onPressed: () {},
      icon: Icon(Icons.add_circle),
    );
  }
}

class IconDelete extends StatelessWidget {
  final Map<String, dynamic> items;
  IconDelete({
    required this.items,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(Icons.remove_circle),
          color: Colors.red,
          onPressed: () {
            print(items);
          },
        ),
        SizedBox(width: 10),
        IconButton(
          onPressed: () => context.go("/list/detail/${items['type']}"),
          icon: Icon(Icons.menu),
        )
      ],
    );
  }
}