import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

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

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

  @override
  _AkunSayaState createState() => _AkunSayaState();
}

class _AkunSayaState extends State<AkunSaya> {
  dynamic _profileImage;
  dynamic _headerImage;
  ImageProvider? imageProvider;

  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) {
        final imageFile = File(pickedFile.path);
        setState(() {
          if (isProfile) {
            _profileImage = imageFile;
          } else {
            _headerImage = imageFile;
          }

          imageProvider =
              kIsWeb ? MemoryImage(_profileImage) : FileImage(_profileImage);
        });
      } else {
        imageProvider = AssetImage("assets/images/luffy.png");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Saya"),
        backgroundColor: Color.fromARGB(225, 79, 76, 182),
      ),
      resizeToAvoidBottomInset: false,
      backgroundColor: const Color.fromARGB(255, 255, 255, 255),
      body: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.only(top: 0.0, left: 20, right: 20),
              child: Container(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: const Color.fromARGB(255, 212, 211, 208),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20),
                  ),
                ),
              ),
            ),
          ),
          Column(
            children: [
              // Header image (bisa diubah)
              SizedBox(
                height: 80,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(40),
                      bottomRight: Radius.circular(40),
                    ),
                    color: Color.fromARGB(225, 79, 76, 182),
                  ),
                ),
              ),
              SizedBox(height: 70),
              Expanded(
                child: Padding(
                  padding: EdgeInsets.all(20),
                  child: ListView(
                    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 40),
                    children: [
                      TextFormField(
                        initialValue: "Luffy Kun",
                        decoration: const InputDecoration(
                          border: UnderlineInputBorder(),
                          labelText: 'Nama',
                          labelStyle: TextStyle(color: Colors.black),
                        ),
                        style: TextStyle(color: Colors.black),
                      ),
                      TextFormField(
                        initialValue: "luffy01",
                        decoration: const InputDecoration(
                          border: UnderlineInputBorder(),
                          labelText: 'Nama Pengguna',
                          labelStyle: TextStyle(color: Colors.black),
                        ),
                        style: TextStyle(color: Colors.black),
                      ),

                      TextFormField(
                        initialValue: "Jl. Sentosa jaya",
                        decoration: const InputDecoration(
                          border: UnderlineInputBorder(),
                          labelText: 'Alamat',
                          labelStyle: TextStyle(color: Colors.black),
                        ),
                        style: TextStyle(color: Colors.black),
                      ),

                      TextFormField(
                        initialValue: "******",
                        decoration: const InputDecoration(
                          border: UnderlineInputBorder(),
                          labelText: 'Kata Sandi',
                          labelStyle: TextStyle(color: Colors.black),
                        ),
                        style: TextStyle(color: Colors.black),
                      ),
                      TextFormField(
                        initialValue: "+62923",
                        decoration: const InputDecoration(
                          border: UnderlineInputBorder(),
                          labelText: 'No. HP',
                          labelStyle: TextStyle(color: Colors.black),
                        ),
                        style: TextStyle(color: Colors.black),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          // Profile Picture (bisa diubah)
          Positioned(
            top: 25,
            left: MediaQuery.of(context).size.width / 2 - 50,
            child: GestureDetector(
              onTap: () => _pickImage(true),
              child: Stack(
                alignment: Alignment.bottomRight,
                children: [
                  CircleAvatar(
                    radius: 50,
                    backgroundColor: Colors.grey[300],
                    backgroundImage:
                        _profileImage != null
                            ? (kIsWeb
                                ? MemoryImage(_profileImage) as ImageProvider
                                : FileImage(_profileImage) as ImageProvider)
                            : null,
                    child:
                        _profileImage == null
                            ? Image.asset("assets/images/luffy.png")
                            : null,
                  ),
                  CircleAvatar(
                    radius: 15,
                    backgroundColor: Colors.blue,
                    child: Icon(Icons.edit, color: Colors.white, size: 15),
                  ),
                ],
              ),
            ),
          ),

          Positioned(
            top: 130,
            left: MediaQuery.of(context).size.width / 2 - 30,
            child: GestureDetector(
              onTap: () => _pickImage(true),
              child: Stack(
                alignment: Alignment.bottomRight,
                children: [
                  Text(
                    "Luffy kun",
                    style: TextStyle(
                      color: Colors.deepPurple,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

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