import React, { useEffect, MouseEvent } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme";
import Citylist from "./citylist";
import {getPicure} from "./pic";

const initSearchParams = { "theme": "", "city": "" }

export default function Body() {

    const [searchParams, setSearchParams] = useSearchParams(initSearchParams)
    let getPics = getPicure();

    useEffect(() => {
        console.log(searchParams.get('theme'), searchParams.get('city'))
        // setSearchParams(searchParams)
    }, [])

    const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
        console.log(`theme id= ${event.currentTarget.id}`)
        setSearchParams({
            ...Object.fromEntries(searchParams),
            theme: event.currentTarget.id,
        })
    }

    const cityHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
        console.log(`city id= ${event.currentTarget.id}`)
        setSearchParams({
            ...Object.fromEntries(searchParams),
            city: event.currentTarget.id
        })
    }

    const Idpics = getPics.filter(p => {

       return (p.themeid == searchParams.get('theme') && p.cityid == searchParams.get('city'))||(p.themeid == searchParams.get('theme') && searchParams.get('city') == "")
       ||(searchParams.get('theme') == "" && p.cityid == searchParams.get('city'))||(searchParams.get('theme') == "" && searchParams.get('city') == "")
    })


    return (
        <div className="flex flex-col px-1 py-1">
            <Theme handleClick={themeHandleClick} />
            <div className="flex flex-col md:flex-row py-10 ">
                <Citylist handleClick={cityHandleClick} />
                <div className="flex md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
                    {Idpics.map((pic, index: number) => (
                        <div className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md" key={index}>
                            <img src={pic.url} className="w-full h-10 md:h-20 object-cover" />
                            <p className="text-center text-xs">{pic.name}</p>
                        </div>
                    ))}
                </div>
            </div>
            <Outlet />
        </div>
        // Body Page
    );
};