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;  // for reading name
  late SharedPreferences prefs; // for reading local storage
  late Color profileColor;  // to store the profile color

  @override
  void initState(){
    super.initState();
    textcontroller=TextEditingController();
    profileColor=Colors.red.shade200; // default profile color
    loadPreferences();
  }  
  
  Future loadPreferences() async{
    prefs = await SharedPreferences.getInstance();
  }
  
  @override
  void dispose(){ // every StatefulWidget has an dispose method which is called when we move to another screen
    // it is used to free up resources
    textcontroller.dispose();
    super.dispose();
  }

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

  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),   // adding margin between main title and sub title
          child:const Text(
            "Linking people with haptics",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w200,
            ),
          ),
        ),

      ],
    );  
  }


  Widget footer(){
    /*
      Consists of :-
        Textfield (for entering name)
        choose Color section
        Join button 
    */
    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,   // linking the textcontroller with the textfield
          ),
        ),

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

            // Color Picker Widget
            CustomColorPickerWidget(
              pickerColor: profileColor, 
              onSubmit: changeColor,
              size:40,
            ),

        ]),
        
        // margin
        const SizedBox(height: 20,),  // just an transparent box taking some space

        // Join button
          CustomButton(
            onPressed: submit,  // trigger submit function on press
            padding:const EdgeInsets.symmetric(vertical:15,horizontal: 20),
            
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(50)),
            ),

            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)=>const HomeScreen()  // HomeScreen
          ),
        );
    }
  }


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

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [

            header(), // header section consists of a Main Title and a Sub Title
            footer(),

          ],
        ),
      ),
    );
  }
}