import React, { useState, useEffect } from 'react';
import { BoxScroll } from '../../../../../../components/customer/containers';

var checkNow = ['none','none','none','none','none','none','none','none'];

const Ingredients = ({...props}) => {
    const [ingMass, setIngMass] = useState([{}]);
    const [check, setCheck] = useState(['none','none','none','none','none','none','none','none']);
    const ingredientsAdd = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        setCheck({...check, [e.target.id]:check[e.target.id]==='none' ? 'yellow' : 'none'});
        checkNow[e.target.id] = check[e.target.id]==='none' ? 'yellow' : 'none';
       // console.log(checkNow);
        if (check[e.target.id]==='none') {
            props.updateData({ingredientsSum:ingMass[e.target.id].price,ingredients:checkNow});
        } else {
           props.updateData({ingredientsSum:(ingMass[e.target.id].price)*-1,ingredients:checkNow});
        }
    }
    useEffect(() => {
        const getData = async () => {
          //const response = await fetch(`https://swapi.dev/api/people/${props.id}/`);
          //const newData = await response.json();
         // const response = await mass;
         // const newData = await mass.json();
         setIngMass([{name:'onion', title:'Лук', price:6},
                     {name:'tomato', title:'Томаты', price:16},
                     {name:'cheese', title:'Сыр', price:20},
                     {name:'mushroom', title:'Грибы', price:10},
                     {name:'bacon', title:'Бекон', price:30},
                     {name:'pineapple', title:'Ананас', price:30},
                     {name:'pickles', title:'Огурчик', price:6},
                     {name:'jalapeno', title:'Халапенью', price:6}]);
        };
        getData();
        setCheck(['none','none','none','none','none','none','none','none']);
        props.updateData({ingredientsSum:0});
      }, [props.id]);

    return(
        <BoxScroll>
            { ingMass.length ? ingMass.map((rows, count) =>(
                <li className='ingredients_box' key={count}>
                    <div className={'ingredients_text_box' + ' ' + check[count]}>
                        <div className={'ingredients_img' + ' ' + rows.name}> </div>
                        <p className='ingredients_name'>{rows.title}</p>
                        <p className='ingredients_price'>{rows.price} p</p>
                        <button type="submit"
                            className={'ingredients_button'}
                            name={rows.name}
                            id={count}
                            value={check[count]}
                            onClick={(e) => ingredientsAdd(e)}>{check[count]==='none'? '+' : '-'}</button>
                    </div>
                </li>)
            ) : '...'
            }
        </BoxScroll>
    )
}

export default Ingredients;