import './ListCard.css';
import Card from './Card';

const ListCard = (props) =>{
  //Esto lo muestra correctamente
  console.log(props.properties)
  //Aquí me da 0, y por ende, no me muestra los valores en props.properties.map
  console.log(props.properties.length)
  return(
    <div className='ListCard'>
      {
        props.properties.map((property)=>{
          return <Card key={property.id}
                       id={property.id}
                       primaryTitle={property.primaryTitle}
                       subtitle={property.subtitle}
                       supportingText={property.supportingText}
                       onClick={property.onClick}
                       actions={props.actions}
                       src={property.image} />
        })
      }
    </div>
  )
}

ListCard.propTypes = {
  properties: PropTypes.array.isRequired
}

export default ListCard;

class Products extends React.Component{
  constructor(props){
    super(props);
    this.state={
      actions: [],
      error: false,
      queryResult: [],
      spinner: true
    }
  }
  componentDidMount(){
    let actionsValues = [
      {
        id: 'btnAdd',
        text: 'Añadir',
        onClick: ()=> {
          //Add the product to the cart
          console.log('Hay que implementarlo');
        }
      }
    ];

    const codeQuery = allProducts().code;

    this.setState(update(this.state, {
      actions: {$set: actionsValues},
      error: {$set: (codeQuery === -1) ? true : false},
      queryResult: {$set: (codeQuery !== -1) ? allProducts().result : allProducts().errorMessage},
      spinner: {$set: (codeQuery !== -1) ? false : true}
    }));
  }
  render(){
    const list = (this.state.spinner)
    ? <Spinner />
    : <ListCard properties={this.state.queryResult} actions={this.state.actions} />;
    return (
      <div className='Products'>
        {list}
      </div>
    )
  }
}