//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();

// }

}