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

const Search = ({ onSearch, snippets }) => {
	const [request, setRequest] = useState("");
	return (
		<>
			<Link to='/work'>
				<div className='btn_block_back'>
					<button className='btn_search'>Back to Work Page</button>
				</div>
			</Link>
			<br />
			<br />
			<div>
				<input
					className='field_for_search'
					value={request}
					onChange={e => setRequest(e.target.value)}
					type='search'
					placeholder='Type name or description'
					aria-label='Search'
				/>
				<br />
				<div className='btn_block_search'>
					<button className='btn_search' onClick={() => onSearch(request)}>
						Search
					</button>
				</div>
			</div>
			<div className='snippet_block'>
				{snippets?.map((key, index) => (
					<div key={key} className='snippet'>
						<img src={code} alt='code'></img>
						<div className='block_content'>
							<p>{`Name: ${snippets?.[index]?.title}` || "Project without name"}</p>
							<p>{`Description: ${snippets?.[index]?.description}` || ""}</p>
							<p>{`Owner: ${snippets?.[index]?.owner?.login}`}</p>
							<div className='btn_center'>
								<Link to={"/project/" + snippets?.[index]?._id}>
									<button className='btn_search'>Open project</button>
								</Link>
							</div>
						</div>
					</div>
				))}
			</div>
		</>
	);
};

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

export default ConnectFormSearch;