import React, { useState, useEffect } from "react";
import useFetch from "../hooks/useFetch";

import { Pagination } from "@mui/material";

import Card from "../components/Card";

const HomePage = () => {
    const url = import.meta.env.VITE_BASE_URL;

    const [inputValue, setInputValue] = useState("");
    const [searchValue, setSearchValue] = useState("");
    const [page, setPage] = useState(1);
    const [favouriteList, setFavouriteList] = useState(
        JSON.parse(window.localStorage.getItem("favouriteMovies")) ?? []
    );
    const [showFavourite, setShowFavourite] = useState(false);

    useEffect(() => {
        window.localStorage.setItem("favouriteMovies", JSON.stringify(favouriteList))
        console.log(favouriteList);
    }, [favouriteList]);

    const { data, loading, error } = useFetch(
        url + "&s=" + searchValue + "&page=" + page
    );
    const handlePageChange = (e) => {
        setPage(e?.target?.textContent);
    };
    const handleSearch = (event) => {
        event.preventDefault();
        setSearchValue(inputValue);
    };
    return (
        <div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
            <div className="flex items-center gap-10">
                <form className="flex gap-3 items-center">
                    <input
                        type="text"
                        name="search"
                        id="search"
                        value={inputValue}
                        onChange={(event) =>
                            setInputValue(event?.target?.value)
                        }
                        className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary"
                    />
                    <button
                        type="button"
                        className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
                        onClick={handleSearch}
                    >
                        Search
                    </button>
                </form>
                <div className="">
                    <label htmlFor="favourite">Favourites</label>
                    <input
                        type="checkbox"
                        name="favourite"
                        id="favourite"
                        onClick={() => setShowFavourite((prev) => !prev)}
                    />
                </div>
            </div>
            {(showFavourite && (
                <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
                    {favouriteList?.map((movie) => (
                        <Card
                            key={movie?.imdbID}
                            movie={movie}
                            setFavouriteList={setFavouriteList}
                            favouriteList={favouriteList}
                        />
                    ))}
                </div>
            )) ||
                (data?.Search?.length > 0 && (
                    <div className="flex flex-col items-center m-10">
                        {loading && (
                            <svg
                                className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
                                viewBox="0 0 24 24"
                                fill="#fff"
                            ></svg>
                        )}
                        <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
                            {data?.Search?.map((movie) => (
                                <Card
                                    key={movie?.imdbID}
                                    movie={movie}
                                    setFavouriteList={setFavouriteList}
                                    favouriteList={favouriteList}
                                />
                            ))}
                        </div>
                        <Pagination
                            sx={{ bgcolor: "#6B8A7A" }}
                            onChange={handlePageChange}
                            page={Number(page)}
                            count={Math.ceil(data?.totalResults / 10)}
                            variant="outlined"
                            shape="rounded"
                        />
                    </div>
                ))}
        </div>
    );
};

export default HomePage;

function SearchBar({
    inputValue,
    event,
    setInputValue,
    target,
    value,
    handleSearch,
    setShowFavourite,
    prev,
}) {
    return (
        <div className="flex items-center gap-10">
            <form className="flex gap-3 items-center">
                <input
                    type="text"
                    name="search"
                    id="search"
                    value={inputValue}
                    onChange={(event) => setInputValue(event?.target?.value)}
                    className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary"
                />
                <button
                    type="button"
                    className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
                    onClick={handleSearch}
                >
                    Search
                </button>
            </form>
            <div className="">
                <label htmlFor="favourite">Favourites</label>
                <input
                    type="checkbox"
                    name="favourite"
                    id="favourite"
                    onClick={() => setShowFavourite((prev) => !prev)}
                />
            </div>
        </div>
    );
}