import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:furibase/components/bottom_navbar.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/scan_button.dart';
import 'package:furibase/screen/saya/akun_saya.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 ProfileScreenCopy extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreenCopy> {
  // 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, 159, 156, 156),
      body: Stack(
        children: [
          Stack(
            children: [
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: SizedBox(height: 85, child: BottomNavbar()),
              ),
            ],
          ),
          Column(
            children: [
              // Header image (bisa diubah)
              GestureDetector(
                onTap: () => _pickImage(false),
                child: Stack(
                  children: [
                    Container(
                      height: 200,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image:
                              _headerImage != null
                                  ? (kIsWeb
                                      ? MemoryImage(_headerImage)
                                          as ImageProvider
                                      : FileImage(_headerImage)
                                          as ImageProvider)
                                  : AssetImage('assets/images/background.jpeg'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 80),
              Expanded(
                child: ListView(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  children: [
                    _buildListItem(Icons.person, "Akun", () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => AkunSaya()),
                      );
                    }),
                    _buildListItem(Icons.person, "Data Diri", () => {}),
                    _buildListItem(
                      Icons.lock,
                      "Kata Sandi",
                      () => {},
                    ), // bisa diubah disini
                    _buildListItem(Icons.language, "Bahasa", () => {}),
                    _buildListItem(
                      Icons.logout,
                      "Keluar",
                      isLogout: true,
                      () => {},
                    ),
                  ],
                ),
              ),
            ],
          ),
          // Profile Picture (bisa diubah)
          Positioned(
            top: 140,
            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
                  //           ? FileImage(_profileImage!)
                  //           : null,
                  //   child:
                  //       _profileImage == null
                  //           ? Icon(Icons.person, size: 50, color: Colors.white)
                  //           : null,
                  // ),
                  // CircleAvatar(
                  //   radius: 15,
                  //   backgroundColor: Colors.blue,
                  //   child: Icon(Icons.edit, color: Colors.white, size: 15),
                  // ),
                  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: 15,
                    backgroundColor: Colors.blue,
                    child: Icon(Icons.edit, color: Colors.white, size: 15),
                  ),
                ],
              ),
            ),
          ),
          // Bottom Navigation Bar
          Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
          Positioned(
            bottom: 1,
            left: MediaQuery.of(context).size.width / 2 - 48,
            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, 255, 255, 255),
      ),
      title: Text(label, style: TextStyle(fontSize: 16, color: Colors.black)),
      trailing: Icon(Icons.arrow_forward_ios, size: 16),
      onTap: onTap,
    );
  }
}