import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:freekake/components/topbar_container.dart';
import 'package:freekake/screen/saya/akun_saya.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

import 'package:flutter/foundation.dart' show kIsWeb;

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  // File? _profileImage;
  // File? _headerImage;
  // final ImagePicker _picker = ImagePicker();
  dynamic _profileImage;
  dynamic _headerImage;
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage(bool isProfile) async {
    if (kIsWeb) {
      // Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
      // if (bytesFromPicker != null) {
      //   setState(() {
      //     if (isProfile) {
      //       _profileImage = bytesFromPicker;
      //     } else {
      //       _headerImage = bytesFromPicker;
      //     }
      //   });
      // }
    } else {
      final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
      if (pickedFile != null) {
        setState(() {
          if (isProfile) {
            _profileImage = File(pickedFile.path);
          } else {
            _headerImage = File(pickedFile.path);
          }
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 255, 255, 255),
      body: Stack(
        children: [
          //Top Bar
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: SizedBox(height: 70, child: TopbarContainer()),
          ),

          SingleChildScrollView(
            child: Column(
              children: [
                // Header image (bisa diubah)
                SizedBox(height: 80),
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 20.0,
                    vertical: 5,
                  ),
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color.fromARGB(255, 241, 238, 238),
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(20),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withValues(alpha: 0.8),
                          spreadRadius: 1,
                          blurRadius: 1,
                          offset: Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    child: ListView(
                      shrinkWrap: true,
                      padding: EdgeInsets.symmetric(horizontal: 0),
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(0.0),
                          child: Container(
                            padding: EdgeInsets.symmetric(
                              horizontal: 0,
                              vertical: 15,
                            ),

                            height: 100,
                            width: 60,
                            color: Color.fromARGB(0, 1, 10, 225),
                            child: // Profile Picture (bisa diubah)
                                Row(
                              children: [
                                Positioned(
                                  top: 0,
                                  child: GestureDetector(
                                    onTap: () => _pickImage(true),
                                    child: Stack(
                                      alignment: Alignment.centerLeft,
                                      children: [
                                        CircleAvatar(
                                          radius: 50,
                                          backgroundColor: Colors.grey[300],
                                          backgroundImage:
                                              _profileImage != null
                                                  ? (kIsWeb
                                                      ? MemoryImage(
                                                            _profileImage,
                                                          )
                                                          as ImageProvider
                                                      : FileImage(_profileImage)
                                                          as ImageProvider)
                                                  : null,
                                          child:
                                              _profileImage == null
                                                  ? Icon(
                                                    Icons.person,
                                                    size: 50,
                                                    color: Colors.white,
                                                  )
                                                  : null,
                                        ),
                                        // CircleAvatar(
                                        //   radius: 20,
                                        //   backgroundColor: Colors.blue,
                                        //   child: Icon(
                                        //     Icons.edit,
                                        //     color: Colors.white,
                                        //     size: 15,
                                        //   ),
                                        // ),
                                      ],
                                    ),
                                  ),
                                ),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(height: 15),
                                    Row(
                                      children: [
                                        Text(
                                          "Name",
                                          style: TextStyle(
                                            color: Colors.blueAccent,
                                          ),
                                        ),
                                      ],
                                    ),
                                    Row(
                                      children: [
                                        Text(
                                          "Edit Profile",
                                          style: TextStyle(
                                            color: Colors.blueAccent,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                        _buildListItem(Icons.person, "Akun", () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => AkunSaya()),
                          );
                        }),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 25.0),
                          child: Divider(height: 0),
                        ),
                        _buildListItem(Icons.person, "Data Diri", () => {}),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 25.0),
                          child: Divider(height: 0),
                        ),
                        _buildListItem(Icons.person, "Point Saya", () => {}),
                        Padding(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 25.0,
                            vertical: 0,
                          ),
                          child: Divider(height: 0),
                        ),
                        SizedBox(height: 20),
                      ],
                    ),
                  ),
                ),

                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color.fromARGB(255, 241, 238, 238),
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(20),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withValues(alpha: 0.8),
                          spreadRadius: 1,
                          blurRadius: 1,
                          offset: Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        _buildListItem(
                          Icons.lock,
                          "FAQ",
                          () => {},
                        ), // bisa diubah disini
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color.fromARGB(255, 241, 238, 238),
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(20),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withValues(alpha: 0.8),
                          spreadRadius: 1,
                          blurRadius: 1,
                          offset: Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        _buildListItem(
                          Icons.language,
                          "Kebijakan & Privasi",
                          () => {},
                        ),
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color.fromARGB(255, 241, 238, 238),
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(20),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withValues(alpha: 0.8),
                          spreadRadius: 1,
                          blurRadius: 1,
                          offset: Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        _buildListItem(Icons.language, "Bantuan", () => {}),
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color.fromARGB(255, 241, 238, 238),
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(20),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withValues(alpha: 0.8),
                          spreadRadius: 1,
                          blurRadius: 1,
                          offset: Offset(0, 3), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        _buildListItem(
                          Icons.logout,
                          "Keluar",
                          isLogout: true,
                          () => {},
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),

          // Bottom Navigation Bar
          Stack(
            children: [
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: SizedBox(height: 85, child: BottomNavbar()),
              ),
            ],
          ),
          Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
          Positioned(
            bottom: 8,
            left: MediaQuery.of(context).size.width / 2 - 38,
            child: Transform.translate(
              offset: Offset(0, -20),
              child: ScanButton(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildListItem(
    IconData icon,
    String label,
    VoidCallback onTap, {
    bool isLogout = false,
  }) {
    return ListTile(
      leading: Icon(
        icon,
        color:
            isLogout
                ? const Color.fromARGB(255, 181, 47, 47)
                : const Color.fromARGB(255, 54, 52, 52),
      ),
      title: Text(label, style: TextStyle(fontSize: 16, color: Colors.black)),
      trailing: Icon(Icons.arrow_forward_ios, size: 16),
      onTap: onTap,
    );
  }
}
