import React from 'react'
import {Table,Button} from 'semantic-ui-react';
import Row from './Row';
import RemoveRow from './RemoveRow';
import EditRow from './EditRow';
import {connect} from 'react-redux';
import {removeFromList, editItem} from '../actions/shoppingActions';
import HocLogger from '../hoclogger/HocLogger';

class ShoppingList extends React.Component {
	
	constructor(props) {
		super(props);
		this.state = {
			removeIndex:-1,
			editIndex:-1
		}
	}
	
	cancel = () => {
		this.setState({
			removeIndex:-1,
			editIndex:-1
		})
	}
	
	removeFromList = (id) => {
		this.props.dispatch(removeFromList(id,this.props.token));
		this.props.hoclog(this.props.loglevel.LOG_INFO,"ShoppingList - removeFromList","Removing item with id:"+id)
		this.cancel();
	}
	
	editItem = (item) => {
		this.props.dispatch(editItem(item,this.props.token))
		this.props.hoclog(this.props.loglevel.LOG_INFO,"ShoppingList - editItem","Editing item with id "+item._id+" to "+JSON.stringify(item));
		this.cancel();
	}
	
	changeToRemoveMode = (id) => {
		for(let i=0;i<this.props.list.length;i++) {
			if(id === this.props.list[i]._id) {
				this.setState({
					removeIndex:i,
					editIndex:-1
				})
			}
		}
	}

	changeToEditMode = (id) => {
		for(let i=0;i<this.props.list.length;i++) {
			if(id === this.props.list[i]._id) {
				this.setState({
					removeIndex:-1,
					editIndex:i
				})
			}
		}
	}

	
	render() {
		let items = this.props.list.map((item,index) => {
			if(this.state.editIndex === index) {
				return(
					<EditRow key={item._id} item={item}
							cancel={this.cancel} editItem={this.editItem}/>
				)
			}
			if(this.state.removeIndex === index) {
				return (
				<RemoveRow key={item._id} item={item} 
				cancel={this.cancel} removeFromList={this.removeFromList}/>
				)
			}
			return (
				<Row key={item._id} item={item} changeToRemoveMode={this.changeToRemoveMode}
					changeToEditMode={this.changeToEditMode}/>
				)
 		})
		return (
			<Table>
				<Table.Header>
					<Table.Row>
						<Table.HeaderCell>Type</Table.HeaderCell>
						<Table.HeaderCell>Count</Table.HeaderCell>
						<Table.HeaderCell>Price</Table.HeaderCell>
						<Table.HeaderCell>Remove</Table.HeaderCell>
						<Table.HeaderCell>Edit</Table.HeaderCell>
					</Table.Row>
				</Table.Header>
				<Table.Body>
				{items}
				</Table.Body>
			</Table>
		)
		
	}
}

const mapStateToProps = (state) => {
	return {
		token:state.login.token,
		list:state.shopping.list
	}
}

export default HocLogger(connect(mapStateToProps)(ShoppingList));