import React from "react";

import style from "./goodsAttributesSelector.module.sass";
import {units} from "../../../constants/units";


const GoodsAttributesSelector = (props) => {
    const {setPrice, setArrayPictures, setValueAttribute, setIdAttribute, simpleGoodAttributes} = props;


    const selectPriceHandler = (e) => {
        let value = e.target.value;
        if(simpleGoodAttributes[0].nameAttribute != "color") {
            value = parseInt(e.target.value, 10)
        }

        simpleGoodAttributes.map((elem, index) => {
            if(elem.valueAttribute == value) {
                setPrice( elem.price );
                setValueAttribute( elem.valueAttribute );
                setArrayPictures( elem.imgUrlArray );
                setIdAttribute(elem.id);
            }
        });
    };


    const filterHandler = (attributes) => {
        return (
            attributes.nameAttribute === "volume"
            || attributes.nameAttribute === "color"
            || attributes.nameAttribute === "weight"
        );
    };
    return(
        <select onChange={selectPriceHandler}>
            {simpleGoodAttributes.filter(filterHandler).map((attribute, index) => {
                return(
                    <option key={index}>
                        {`${attribute.valueAttribute}${units[attribute.nameAttribute]}`}
                    </option>
                );
            })}
        </select>
    );
};

export default GoodsAttributesSelector;