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

import { Pagination } from "@mui/material";
import { ClipLoader } from "react-spinners";

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 { data, loading, error } = useFetch(
        url + "&s=" + searchValue + "&page=" + page
    );

    console.log(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>
                <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-primary rounded outline-none border border-ternary"
                    />
                    <button
                        type="button"
                        className="px-4 h-full border border-quadnary text-quadnary"
                        onClick={handleSearch}
                    >
                        Search
                    </button>
                </form>
            </div>
            {data?.Search?.length > 0 && (
                <div className="flex flex-col items-center m-10">
                    <ClipLoader color="#fff" loading={loading} size={100} />
                    <div className="flex flex-wrap gap-4 mb-6 justify-center">
                        {data?.Search?.map((movie) => (
                            <Card key={movie?.imdbID} movie={movie} />
                        ))}
                    </div>
                    <Pagination
                        sx={{ bgcolor: "#fff" }}
                        onChange={handlePageChange}
                        page={Number(page)}
                        count={Math.ceil(data?.totalResults / 10)}
                        variant="outlined"
                        shape="rounded"
                    />
                </div>
            )}
        </div>
    );
};

export default HomePage;