import { 
	Paper, 
	TextField, 
	Stack,
	Popper,
	Avatar,
	Typography,
	Card,
	InputAdornment
} from "@mui/material";

import SearchIcon from "@mui/icons-material/Search";

import React from "react";

export default class Content extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			searchtext:'',
			result:[],
			anchorEl:null
		};
	}


	handleSearch = (searchtext) => {
		if(searchtext.trim().length > 2){
			this.props.socket.emit('search',searchtext,(err,res)=>{
				if(!err){
					this.setState({ result:res });
					console.log(res);
				}
				else{
					console.log('Err',err);
					this.setState({ result:[] });
				}
			});
		}
		else{
			this.setState({ result:[] });
		}
	}

	render() {
		return (
			<div style={{ width:'100%'}}>
				<Stack spacing={2}>
					<Card style={{ width:'100%',margin:'20px auto'}} sx={{ maxWidth: 'sm' }}>
						<TextField
							spellCheck={false}
							InputProps={{
								startAdornment: (
									<InputAdornment>
										<SearchIcon style={{ marginRight:'20px'}}/>
									</InputAdornment>
								)
							}}
							value={this.state.searchtext}
							inputRef={(input) => {input && input.focus()}}
							onChange={(e) => {
								this.setState({ anchorEl:e.target,searchtext: e.target.value });
								this.handleSearch(e.target.value);
							}}
							autoComplete="off"
							fullWidth
						/>
					</Card>
					<Popper
						open={this.state.result.length > 0}
						anchorEl={this.state.anchorEl}
						placement={'bottom-start'}
					>
						<Paper style={{ padding: 20}}>
							<Stack>
								{this.state.result.map((line,i)=>(
									<Stack key={i} direction="row" spacing={2} style={{cursor: 'pointer',userSelect:'none'}} sx={{alignItems: "center"}} onClick={() => { window.location = 'https://t.growheads.de/'+line.cSeo }}>
										<Avatar src={'https://t.growheads.de/media/image/product/'+(line.kArtikel)+'/xs/'+(line.cSeo)+'.jpg'} sx={{ width: 40, height: 40 }} variant="square"/>
										<Typography>{line.cName}</Typography>
									</Stack>
								))}
							</Stack>
						</Paper>
					</Popper>
				</Stack>
			</div>
		);
	}
}