import React, {useState} from 'react';
import style from './goodsAttributeElement.module.sass';
import CreateGoodsAttributeForm from "../../../../../forms/createGoodsAttributeForm/createGoodsAttributeForm";
import {units} from "../../../../../../constants/units";
import {translateNameGoodsAttributes} from "../../../../../../constants/goods";
import {pathStaticGoodsImages} from "../../../../../../constants/images";
import {typesGoodsAttributeElement} from "../../../../../../constants/goods";
import {connect} from 'react-redux';
import {deleteGoodsAttributes} from "../../../../../../actions/actionCreator";

const GoodsAttributeElement = (props) => {
    const {id, imgUrlArray, nameAttribute, price, valueAttribute, typeElement} = props;
    const [isOpenForm, setStatusOpenForm] = useState(false);


    if(typeElement === typesGoodsAttributeElement.OLD_ELEMENT) {
        return (
            <div className={style.mainContainer}>
                <div className={style.infoContainer} onClick={() => setStatusOpenForm(!isOpenForm)}>
                    <img src={pathStaticGoodsImages + imgUrlArray[0]} alt={imgUrlArray[0]} />
                    <h2>
                        {
                            id ? `Идентификатор аттрибута: ${id}` : 'Новый аттрибут'
                        }
                    </h2>
                    <h2>{translateNameGoodsAttributes[nameAttribute]}: {valueAttribute} {units[nameAttribute]}</h2>
                    <h2>Цена: {price} грн</h2>
                </div>
                <div className={style.formContainer}>
                    {
                        isOpenForm && (
                            <CreateGoodsAttributeForm
                                {...props}
                            />
                        )
                    }
                </div>
                <h2 onClick={() => props.deleteAttribute(id)}>Delete attribute</h2>
            </div>
        );
    }else if(typeElement === typesGoodsAttributeElement.NEW_ELEMENT) {
        return (
            <div className={style.mainContainer}>
                <h2 onClick={() => setStatusOpenForm(!isOpenForm)}>new Attribute</h2>
                <div className={style.formContainer}>
                    {
                        isOpenForm && (
                            <CreateGoodsAttributeForm
                                {...props}
                                isNewAttribute={true}
                            />
                        )
                    }
                </div>
            </div>
        )
    }
};


const mapDispatchToProps = dispatch => ({
   deleteAttribute: (goodsAttributeId) => dispatch(deleteGoodsAttributes(goodsAttributeId))
});

export default connect(null, mapDispatchToProps)(GoodsAttributeElement);