//connector:
import {login} from "./login.js";
import {register} from "./register.js"
import {addMovie} from "./addMovie.js"
import {showMovies} from "./showMovies.js"



function load(){


let mainContainer=document.getElementById("mainContainer");
mainContainer.innerHTML="";
showMovies();

let loginLink=document.getElementById("loginLink");
loginLink.addEventListener("click", function (e){
    console.log("login link clicked")
    e.preventDefault();
    login()
})

let registerLink=document.getElementById("registerLink");
registerLink.addEventListener("click", function (e){
    console.log("register link clicked")
    e.preventDefault();
    register()
})


console.log("hello there")

}

load()



showMovies:
import {addMovie} from "./addMovie.js"
export function showMovies() {
    // let mainContainer = document.getElementById("mainContainer");
    // mainContainer.style.display = "none";

    let main = document.getElementsByTagName("main")[0];
    main.innerHTML="";
    let moviesSection = document.createElement("section");
    moviesSection.id="moviesSection";
    

    var myHeaders = new Headers();
    myHeaders.append("Content-Type","application/json");

    var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
    };

    fetch("http://localhost:3030/data/movies", requestOptions)
        .then(response => response.json())
        .then(result => visualiseMovies(result))
        .catch(error => console.log('error', error));


function visualiseMovies(result) {
    let movies = Object.values(result);
    movies.forEach(m => {
        let movieDiv = document.createElement("div");
        movieDiv.className = "container";
        movieDiv.innerHTML = `
        <div class="container">
                    <div class="row bg-light text-dark">
                        <h1>Movie title: ${m.title}</h1>

                        <div class="col-md-8">
                            <img class="img-thumbnail"
                                src=${m.img} alt="Movie">
                        </div>
                        <div class="col-md-4 text-center">
                            <h3 class="my-3 ">Movie Description</h3>
                            <p>${m.description}</p>
                            <a class="btn btn-danger" href="#">Delete</a>
                            <a class="btn btn-warning" href="#">Edit</a>
                            <a class="btn btn-primary" href="#">Like</a>
                            <span class="enrolled-span">Liked 1</span>
                        </div>
                    </div>
                </div>`
       
        moviesSection.appendChild(movieDiv);
        let deleteBtn=movieDiv.querySelector(".btn-danger");
        if (m.createdBy==sessionStorage.getItem("loggedUserId")){ 
           
           deleteBtn.addEventListener("click",function(e){
            e.preventDefault();
            console.log("i delete stuff")
           })
        } else {
            deleteBtn.remove();
        }

    });
    if (sessionStorage.getItem("loggedUserToken")){
        console.log(sessionStorage.getItem("loggedUserToken"))
        console.log("user is loged display add movie button")
        let addMovieLink=document.createElement("section");
        addMovieLink.innerHTML=`   
        <a href="#" id="addMovieLink" class="btn btn-warning ">Add Movie</a>`
        addMovieLink.addEventListener("click", function(e){
            e.preventDefault();
            addMovie();
        })
        main.appendChild(addMovieLink)
    }

    main.appendChild(moviesSection);
}
}

login:

import {saveCredentialsAndRedirect} from "./saveCredentialsAndRedirect.js"

export function login() {
    let main = document.getElementsByTagName("main")[0];
    main.innerHTML = "";


    let loginSection = document.createElement("section");
    loginSection.id = "loginSection";
   loginSection.innerHTML=`
   <form id="loginForm" class="text-center border border-light p-5" action="" method="">
   <div class="form-group">
       <label for="email">Email</label>
       <input type="email" class="form-control" placeholder="Email" name="email" value="">
   </div>
   <div class="form-group">
       <label for="password">Password</label>
       <input type="password" class="form-control" placeholder="Password" name="password" value="">
   </div>

   <button type="submit" class="btn btn-primary">Login</button>
</form>`
   
    main.appendChild(loginSection);


    loginForm.addEventListener("submit", function (e) {
        e.preventDefault();
        console.log("who");
        let formData = new FormData(loginForm);
        let email = formData.get("email");
        let password = formData.get("password");

        let requestBody = {
            email,
            password
        }
        console.log(requestBody)
        let b = JSON.stringify(requestBody)

        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: b,
            redirect: 'follow'
        };

        fetch("http://localhost:3030/users/login", requestOptions)
            .then(response => response.json())
            .then(result => saveCredentialsAndRedirect(result,loginSection))
            .catch(error => console.log('error', error));
    })

    
}

saveCredentials and shit:
import {showMovies} from "./showMovies.js"

export function saveCredentialsAndRedirect(fulfilledRequest,section){
    console.log(fulfilledRequest)
    sessionStorage.setItem("loggedUserId", fulfilledRequest._id);
    sessionStorage.setItem("loggedUserToken", fulfilledRequest.accessToken);
    sessionStorage.setItem("userIsLogged", "true");
    let loginLink = document.getElementById("loginLink");
    loginLink.style.display = "none";
    let registerLink = document.getElementById("registerLink");
    registerLink.style.display = "none";
    //visualise stuff back and hide login
    section.remove()
    showMovies();
}

addMovie:
import { showMovies } from "./showMovies.js";

export function addMovie(){
    console.log("addmovie clicked")
    let main = document.getElementsByTagName("main")[0];
    main.innerHTML = "";

    let addMovieSection=document.createElement("section");
    addMovieSection.innerHTML=`
  
    <form id="addMovieForm" class="text-center border border-light p-5" action="#" method="">
        <h1>Add Movie</h1>
        <div class="form-group">
            <label for="title">Movie Title</label>
            <input type="text" class="form-control" placeholder="Title" name="title" value="">
        </div>
        <div class="form-group">
            <label for="description">Movie Description</label>
            <textarea class="form-control" placeholder="Description" name="description"></textarea>
        </div>
        <div class="form-group">
            <label for="imageUrl">Image url</label>
            <input type="text" class="form-control" placeholder="Image Url" name="imageUrl" value="">
        </div>
        <button id="addMovieButton" type="submit" class="btn btn-primary">Submit</button>
    </form>
`
main.appendChild(addMovieSection);

    let addMovieForm=document.getElementById("addMovieForm");
    addMovieForm.addEventListener("submit", function(e){
        e.preventDefault();
     let formData=new FormData(addMovieForm);
     submitMovieAndRedirect(formData)
    })

    function submitMovieAndRedirect(formData){
        let title=formData.get("title");
        let description=formData.get("description");
        let imageUrl=formData.get("imageUrl");
        let createdBy=sessionStorage.getItem("loggedUserId")
        if (title.length==0||description.length==0||imageUrl==0){
            return alert("All fields are required!")
        }
        let movieObj={title,description,imageUrl,createdBy}
        console.log(movieObj)
       

        var myHeaders = new Headers();
myHeaders.append("X-Authorization", sessionStorage.getItem("loggedUserToken"));
myHeaders.append("Content-Type", "application/json")

var raw = JSON.stringify(movieObj);

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://localhost:3030/data/movies", requestOptions)
  .then(response => response.json())
  .then(result => showMovies())
  .catch(error => console.log('error', error));
    }
   

}


register:

import {saveCredentialsAndRedirect} from "./saveCredentialsAndRedirect.js"
export function register() {
    console.log("hello?")

    let main = document.getElementsByTagName("main")[0];
    main.innerHTML = "";

    let registerSection = document.createElement("section");
    registerSection.id = "registerSection";
    registerSection.innerHTML = `
   <form id="registerForm" class="text-center border border-light p-5" action="#" method="post">
   <div class="form-group">
       <label for="email">Email</label>
       <input type="email" class="form-control" placeholder="Email" name="email" value="">
   </div>
   <div class="form-group">
       <label for="password">Password</label>
       <input type="password" class="form-control" placeholder="Password" name="password" value="">
   </div>

   <div class="form-group">
       <label for="repeatPassword">Repeat Password</label>
       <input type="password" class="form-control" placeholder="Repeat-Password" name="repeatPassword"
           value="">
   </div>

   <button type="submit" class="btn btn-primary">Register</button>
</form>`

    main.appendChild(registerSection);

    registerForm.addEventListener("submit", function (e) {
        e.preventDefault();

        let formData = new FormData(registerForm);
        let email = formData.get("email");
        let password = formData.get("password");
        let repeatPassword = formData.get("repeatPassword");
        if (password !== repeatPassword) {
            return alert("passwords do not match")
        }

        let requestBody = {
            email,
            password
        }
        console.log(requestBody)
        let b = JSON.stringify(requestBody)

        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: b,
            redirect: 'follow'
        };

        fetch("http://localhost:3030/users/register", requestOptions)
            .then(response => response.json())
            .then(result => saveCredentialsAndRedirect(result,registerSection))
            .catch(error => console.log('error', error));
    })

    // function saveCredentialsAndRedirect(result) {
    //     console.log(result)
    //     sessionStorage.setItem("loggedUserId", result._id);
    //     sessionStorage.setItem("loggedUserToken", result.accessToken);
    //     sessionStorage.setItem("userIsLogged", "true");
    //     let loginLink = document.getElementById("loginLink");
    //     loginLink.style.display = "none";
    //     let registerLink = document.getElementById("registerLink");
    //     registerLink.style.display = "none";
    //     //visualise stuff back and hide login
    //     registerSection.remove()
    //     showMovies();

    // }

}