import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'custom_color_picker_widget.dart';
import 'custom_button.dart';
import 'home_screen.dart';

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

  @override
  State<SetupScreen> createState(){
    return _SetupScreenState();
  }
}


class _SetupScreenState extends State<SetupScreen>{
  late TextEditingController textcontroller;
  late SharedPreferences prefs;
  late Color profileColor;

  @override
  void initState(){
    super.initState();
    textcontroller=TextEditingController();
    profileColor=Colors.red.shade200;
    loadPreferences();
  }  
  
  Future loadPreferences() async{
    prefs = await SharedPreferences.getInstance();
  }
  
  @override
  void dispose(){
    textcontroller.dispose();
    super.dispose();
  }

  Widget header(){
    return Column(
      children: [
        // Main Title
        const Text(
          "Haptic Link",
          style: TextStyle(
            fontSize: 40,
            fontWeight: FontWeight.w500,
          ),
        ),

        // Sub title
        Container(
          margin:const EdgeInsets.only(top:20),
          child:const Text(
            "Linking people with haptics",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w200,
            ),
          ),
        ),

      ],
    );  
  }

  void changeColor(color){
    setState((){
      profileColor=color;
    });
  }

  Widget footer(){
    return Column(
      children: [
        // Input fields
        Container(
          margin:const EdgeInsets.only(bottom:20),
          child:TextField(
            decoration:const InputDecoration(
              hintText: "Enter your first name",
              border:OutlineInputBorder(),
            ),
            style:const TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w300,
            ),
            controller: textcontroller,   
          ),
        ),

        // Color Picker and Text in a row
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
          
          Container(
            margin:const EdgeInsets.only(right:20),
            child:const Text("Choose your Color"),
          ),

          CustomColorPickerWidget(
            pickerColor: profileColor, 
            // onColorChanged: (color){},
            onSubmit: changeColor,
            size:40,
          ),

        ]),
        
        // margin
        const SizedBox(height: 20,),

        // submit button
          CustomButton(
          onPressed: ()=>submit(),
          padding:const EdgeInsets.symmetric(vertical:15,horizontal: 20),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(40)),
          ),
          child:const Text(
            "Join",
            style:TextStyle(
              fontSize:20,
            ),
          ),
        ),
      ],
    );  
  }

  void submit(){
    if(textcontroller.text.isNotEmpty){
      // save username & profileColor to Shared Preferences
      prefs.setBool("setup_done", true);
      prefs.setString("username", textcontroller.text);
      prefs.setString("profile_color", colorToHex(profileColor));
      // go to Lobby
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          // builder: (context)=>LobbyScreen()
          builder: (context)=>const HomeScreen()
          ),
        
        );
    }
  }


  @override
  Widget build(BuildContext context){
    return Scaffold(
      body:Container(
        padding:const EdgeInsets.all(20),

        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            // crossAxisAlignment: CrossAxisAlignment,
            children: [

              header(),
              
              footer(),

            ],
          ),
        ),
      ),
    );
  }
}