import {UpdateForm} from "./index";
import {gql, urlUpload, actionPromise, actionGoodCard, getGoods,
    actionUserFindOne, updateAction} from "../reducers";
import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
import { connect } from "react-redux";
import { useEffect, useState, useRef } from "react";


const YourProfile = ({data, getData}) => {
    useEffect(() =>  getData('ML'), [])
    const date = new Date(+data.createdAt);
    console.log(data)
    return (
        <>
            <div className = "profilePage">
                <h2>Привіт, {data.nick || "людино"}!</h2>
                <img src={data.avatar ? data.avatar : 'https://pngicon.ru/file/uploads/picca-1.png'} />
                <span>
                    Сторінку створено {`${date.getDate()}. ${date.getMonth() + 1}. ${date.getFullYear()} о ${date.getHours()}: ${date.getMinutes()}: ${date.getSeconds()}  `}
                </span>
                <span>
                    Пс.. не подобається аватар, логін чи нікнейм? То зміни їх
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                    </svg>
                     <span className = "click">ТИЦ</span>
                </span>
                <UpdateForm onchange = {updateAction}/>
            </div>
        </>
    )
}

const mapStateToProps = state => ({
     state: state,
     data: state.promiseRed && state.promiseRed.user &&
     state.promiseRed.user.payload && state.promiseRed.user.payload.data &&
     state.promiseRed.user.payload.data.UserFindOne
    // basket: state.basket,
    // GoodsArr: arrFromObj(ObjFilter(state.basket, "price")),
    // order: orderArr(arrFromObj(ObjFilter(state.basket, "price"))),
    // orderDone: state.promiseRed && state.promiseRed.order && 
    // state.promiseRed.order.payload && 
    // state.promiseRed.order.payload.data.OrderUpsert
  });


  
  const mapDispatchToProps = dispatch => bindActionCreators({
    getData: actionUserFindOne,
    // onDel: actionCartDelete,
    // onClear: actionCartClear,
    // onOrder: actionOrder
  }, dispatch);

const CYourProfile = connect(mapStateToProps, mapDispatchToProps)
(YourProfile)
export default CYourProfile;