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 ListBlockPage extends StatelessWidget {
  const ListBlockPage({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),
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0xff078C84),
                    Colors.white,
                  ]),
            ),
          ),
          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(),
                GridView.builder(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4, childAspectRatio: 16 / 9),
                  itemBuilder: (context, index) => Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      InkWell(
                        onTap: () => context.go(
                            "/list/listblock/search/${items[index]['type']}"),
                        child: SizedBox(
                          width: 60,
                          height: 60,
                          child: gambar(items[index]),
                        ),
                      ),
                      Text(items[index]['type']),
                    ],
                  ),
                  itemCount: 7,
                ),
                AvailableMenu(),
                GridView.builder(
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4, childAspectRatio: 16 / 9),
                  itemBuilder: (context, index) => Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      InkWell(
                        onTap: () => context.go(
                            "/list/listblock/search/${items[index]['type']}"),
                        child: SizedBox(
                          width: 60,
                          height: 60,
                          child: gambar(items[index]),
                        ),
                      ),
                      Text(items[index]['type']),
                    ],
                  ),
                  itemCount: items.length,
                ),
              ],
            ),
          ),
        ]));
  }

  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('/account'),
              child: Text(
                'Customize',
                style: TextStyle(
                    color: Color(0xff078C84), fontWeight: FontWeight.w300),
              ))
        ],
      ),
    );
  }
}