import React, { Component } from "react";
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("members"));

class Members extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchValue: "", 
            searchResult: null,
            error: null 
        };
    }

    handleSearchChange = (event) => {
        const searchValue = event.target.value;
        // Update the searchValue state with the input value
        this.setState({ searchValue }, () => {
            // Check if searchValue length is 13, if yes, trigger search
            if (searchValue.length === 13) {
                this.searchMember();
            }
        });
    };

    searchMember = async () => {
        const { searchValue } = this.state;
        try {
            // Make AJAX request to your Laravel route
            const response = await axios.get(`/findMember/${searchValue}`);
            // Update state with search result
            this.setState({ searchResult: response.data, error: null });
            window.location.href = `/member_profile/${response.data.id}`;
        } catch (error) {
            console.error("Error fetching member:", error);
            this.setState({ searchResult: null, error: "Member not found" });

        }
    };


    render() {
        const { searchResult, error } = this.state;
        return (
            <div className="card mb-3">
                <div className="card-header">
                    <div className="row flex-between-end">
                        <div className="col-auto align-self-center">
                            <form>
                                <input
                                    type="text"
                                    required
                                    min="13"
                                    max="13"
                                    className="form-control"
                                    placeholder="National ID"
                                    name="search"
                                    id="search"
                                    value={this.state.searchValue}
                                    onChange={this.handleSearchChange}
                                />
                                <br />                               
                            </form>
                        </div>
                    </div>
                </div>

                {(searchResult || error) && (
                    <div className="card-body">
                        {error ? (
                            <p>{error}</p>
                        ) : (
                            <>
                                <p>Name: {searchResult.name}</p>
                                {/* Include other details of the member */}
                            </>
                        )}
                    </div>
                )}
            </div>
        );
    }
}

export default Members;

if (document.getElementById("members")) {
    root.render(<Members />);
}
