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

import '../../utils/definitions/style_guide.dart';
import '../../utils/logic/PreferencesService.dart';
import '../../utils/widgets/BottomNavigationWidget.dart';
import 'widgets/CustomDivider.dart';
import 'widgets/SetPinPopup.dart';
import 'widgets/TextSwitchContainer.dart';

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  bool isPinEnabled = false; // Default to false

  @override
  void initState() {
    super.initState();
    _loadPinEnabledState();
  }

  void _loadPinEnabledState() async {
    isPinEnabled = await PreferencesService().isPinEnabled();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppStyle.backgroundColor,
      body: Container(
        padding: EdgeInsets.only(bottom: 0),
        margin: const EdgeInsets.fromLTRB(30, 30, 30, 0),
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              const SizedBox(
                height: 100,
              ),

              // Settings section
              Container(
                margin: EdgeInsets.only(bottom: 10),
                alignment: Alignment.topLeft,
                child: Text('settings', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24)),
              ),
              TextSwitchContainer(
                leftText: "change color",
                onTap: () => context.go("/color"),
              ),
              CustomDivider(),
              FutureBuilder<bool>(
                future: PreferencesService().isPinEnabled(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return CircularProgressIndicator(); // or some other placeholder
                  }
                  bool pinEnabled = snapshot.data ?? false; // Default to false if null
                  return TextSwitchContainer(
                    leftText: "pin",
                    hasSwitch: true,
                    onTap: () => {showSetPinPopup(context)},
                    onSwitchToggle: (value) {
                      if (value) {
                        PreferencesService().enablePin();
                      } else {
                        PreferencesService().disablePin();
                      }
                      // Consider updating the state here or using other state management
                    },
                    switchDefaultValue: pinEnabled,
                  );
                },
              ),
              CustomDivider(),
              TextSwitchContainer(
                leftText: "your data",
                onTap: () => print('Container tapped'),
              ),
              // Community section
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 50, 0, 10),
                child: Container(
                  alignment: Alignment.topLeft,
                  margin: EdgeInsets.only(bottom: 10),
                  child: Text('community', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24)),
                ),
              ),
              TextSwitchContainer(
                leftText: "join our discord",
                rightText: "fulfilled",
                onTap: () => print('Container tapped'),
              ),
              CustomDivider(),
              TextSwitchContainer(
                leftText: "our instagram",
                rightText: "@get.fulfilled",
                onTap: () => print('Container tapped'),
              ),
              CustomDivider(),
              TextSwitchContainer(
                leftText: "share fulfilled with your loved ones",
                onTap: () => print('Container tapped'),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(0, 50, 0, 10),
                child: Container(
                  alignment: Alignment.topLeft,
                  child: Text('humans behind fulfilled', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24)),
                ),
              ),
              TextSwitchContainer(
                leftText: "about us",
                onTap: () => print('Container tapped'),
              ),
              CustomDivider(),
              TextSwitchContainer(
                leftText: "support us",
                onTap: () => print('Container tapped'),
              ),
              CustomDivider(),
              TextSwitchContainer(
                leftText: "give feedback",
                onTap: () => print('Container tapped'),
              ),
              //
              ListTile(
                title: Text('imprint & privacy policy', style: TextStyle(color: Colors.grey, fontSize: 15)),
                onTap: () => {}, // Implement your logic
              ),
              SizedBox(
                height: 150,
              )
            ],
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: CustomBottomNavigationBar(initialSelectedIndex: 2),
    );
  }

  void showSetPinPopup(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SetPinPopup();
      },
    );
  }
}