import { useState } from "react";
import { useAuth } from "react-oidc-context";

export function Parameters(
    props: {
        setListingData: (data: any) => void,
    }
) {
    const [error, setError] = useState('')
    const [isLoading, setIsLoading] = useState(false)
    const { user } = useAuth(); // Get user data (includes token)
    const fetchData = async () => {
        setIsLoading(true);

        try {
            const accessToken = user?.access_token;
            const response = await fetch('/api/listing_geojson',
                {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${accessToken}`, // Pass the token
                        'Content-Type': 'application/json',
                    },
                }
            );
            if (!response.ok) throw new Error('Error: ' + response.json());
            const data: Response = await response.json();
            props.setListingData(data);
        } catch (err) {
            setError('Failed to fetch data: ' + err);
            alert(error)
        } finally {
            setIsLoading(false);
        }
    };

    return <>
        <div className="modal modal-open" id="modal_overlay">
            <div className="modal-inner">
                <div className="modal-content">
                    <div className="modal-close-icon">
                        <a href="javascript:void(0)" className="close-modal"><i className="fa fa-times"
                            aria-hidden="true"></i></a>
                    </div>
                    <div className="modal-content-inner">
                        <h4>Visualization Parameters</h4>
                        <p>Conflicting parameters will yield zero results.</p>
                    </div>

                    <div className="row">
                        <div className="five columns">
                            <label >City</label>
                            <input type="search" className="u-full-width" id="city_input" placeholder="London"
                                rv-value="filter.city" /> <br />
                            <div>
                                <div className="one columns">
                                    <p></p>
                                    <p></p>
                                    <p>or</p>Squaremeter
                                </div>
                                <div className="five columns">
                                    <label >Country</label>
                                    <select className="u-full-width" id="country_input" rv-value="filter.country">
                                        <option rv-each-country="filter.countries" rv-value="country">country placeholder</option>
                                    </select>
                                </div>
                            </div>
                            <hr className="modal-buttons-seperator" />
                            <label >What to visualize?</label>

                            <select defaultValue={'qmprice'} className="u-full-width" id="heatmap_type" rv-value="filter.mode">
                                <option value="qmprice">Price per squaremeter</option>
                                <option value="rooms">Number of rooms</option>
                                <option value="qm">Squaremeter</option>
                                <option value="total_price">Price</option>
                            </select>

                            <hr className="modal-buttons-seperator" />
                            <div className="modal-buttons">
                                <button className="button-primary close-modal" disabled={isLoading} onClick={() => {
                                    fetchData()
                                }}>Load Data</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </>
}