import { actionSearch } from "../actions/actionSearch";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { useState } from "react";
import "./Main.css";

const Search = ({ onSearch, snippets }) => {
    const [request, setRequest] = useState('');
    return (
        <>
            <Link to="/work">
                <button>
                    Back to Main Page
                </button>
            </Link>
            <br />
            <br />
            <div>
                <input
                    value={request}
                    onChange={(e) => setRequest(e.target.value)}
                    type="search"
                    placeholder="Name of project"
                    aria-label="Search"
                />
                <br />
                <button onClick={() => onSearch(request)}>
                    Search
                </button>
            </div>

            {snippets?.map((key, index) => (
                <div>
                    <div>
                        <div>
                            <h3>
                                {snippets?.[index]?.title || "Project without name"}
                            </h3>
                            <p>
                                <span>Description</span>&nbsp;
                                {snippets?.[index]?.description || ""}
                            </p>
                            <p>{`Owner: ${snippets?.[index]?.owner?.login}`}</p>
                            <Link to={"/project/" + snippets?.[index]?._id}>
                                <button>Open project</button>
                            </Link>
                        </div>
                    </div>
                </div>
            ))}
        </>
    )
}

const ConnectFormSearch = connect(state => ({ snippets: state?.p?.searchSnippet?.payload?.data?.SnippetFind }), { onSearch: actionSearch })(Search)

export default ConnectFormSearch;