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

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

class AccountPage extends StatefulWidget {
  const AccountPage({super.key});

  @override
  State<AccountPage> createState() => _AccountPageState();
}

class _AccountPageState extends State<AccountPage> {
  int _selectedNavbar = 2;

  void _changeSelectedNavBar(int index) {
    setState(() {
      _selectedNavbar = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        elevation: 0,
        toolbarHeight: 44,
        title: Text(
          date,
          style: TextStyle(color: Color(0xff303336), fontSize: 15),
        ),
        actions: [
          Icon(
            Icons.signal_cellular_alt,
            color: Color(0xff303336),
          ),
          Icon(
            Icons.wifi,
            color: Color(0xff303336),
          ),
          RotatedBox(
            quarterTurns: -3,
            child: Icon(
              Icons.battery_std,
              color: Color(0xff303336),
            ),
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.history), label: 'History'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Account')
        ],
        currentIndex: _selectedNavbar,
        onTap: _changeSelectedNavBar,
      ),
      body: Column(
        children: [
          Container(
            height: 44,
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Text(
              'Account',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Divider(),
          Container(
            padding: EdgeInsets.all(10),
            child: Row(
              children: [
                CircleAvatar(
                  backgroundColor: Color(0xff078C84),
                  child: Text('J'),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: Text(
                    'James Triyono',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                )
              ],
            ),
          ),
          Divider(
            thickness: 8,
          ),
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.all(10),
            child: Text(
              'Info',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            height: 5,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              children: [
                Text(
                  'User ID',
                  style: TextStyle(color: Color(0xff292D32).withOpacity(0.75)),
                ),
                Spacer(),
                Text(
                  'jamet',
                  style: TextStyle(color: Color(0xff292D32)),
                )
              ],
            ),
          ),
          Container(
            height: 8,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              children: [
                Text(
                  'Location',
                  style: TextStyle(color: Color(0xff292D32).withOpacity(0.75)),
                ),
                Spacer(),
                Text(
                  'Room 331',
                  style: TextStyle(color: Color(0xff292D32)),
                )
              ],
            ),
          ),
          Container(
            height: 8,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              children: [
                Text(
                  'Request Group',
                  style: TextStyle(color: Color(0xff292D32).withOpacity(0.75)),
                ),
                Spacer(),
                Text(
                  'All',
                  style: TextStyle(color: Color(0xff292D32)),
                )
              ],
            ),
          ),
          Container(
            height: 10,
          ),
          Divider(
            thickness: 8,
          ),
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.all(10),
            child: Text(
              'Setting',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              children: [
                Icon(
                  Icons.language,
                  color: Color(0xff292D32).withOpacity(0.75),
                ),
                Container(
                    margin: EdgeInsets.symmetric(horizontal: 5),
                    child: Text('Language')),
                Spacer(),
                Text('English'),
                Icon(Icons.chevron_right)
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            color: Color(0xff514844).withOpacity(0.5),
            height: 1,
            width: MediaQuery.of(context).size.width * 0.95,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              children: [
                RotationTransition(
                  turns: AlwaysStoppedAnimation(135 / 360),
                  child: Icon(
                    Icons.vpn_key,
                    color: Color(0xff292D32).withOpacity(0.75),
                  ),
                ),
                Container(
                    margin: EdgeInsets.symmetric(horizontal: 5),
                    child: Text('Password')),
                Spacer(),
                Text('Change password'),
                Icon(Icons.chevron_right)
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.all(10),
            color: Color(0xff514844).withOpacity(0.5),
            height: 1,
            width: MediaQuery.of(context).size.width * 0.95,
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: Row(
              children: [
                Icon(
                  Icons.logout,
                  color: Color(0xff292D32).withOpacity(0.75),
                ),
                Container(
                    margin: EdgeInsets.symmetric(horizontal: 5),
                    child: Text('Logout')),
                Spacer(),
                Icon(Icons.chevron_right)
              ],
            ),
          ),
          Container(
            height: 10,
          ),
          Divider(
            thickness: 8,
          ),
        ],
      ),
    );
  }
}