import React from 'react';
import {useEffect, useState} from "react";
import {useDropzone} from "react-dropzone";
import {sortableContainer, sortableElement} from "react-sortable-hoc";
import Box from "@mui/material/Box";
import {backURL} from "../../../actions/PathDB";
import {Button, CircularProgress, Grid, TextField} from "@mui/material";
import {arrayMoveImmutable} from "array-move";
import Typography from "@mui/material/Typography";
import Autocomplete from "@mui/material/Autocomplete";
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
import {Link} from "react-router-dom";
import {connect} from "react-redux";
import {actionAllCategory} from "../../../actions/ActionCategory";
import {actionGoodUpsert} from "../../../actions/ActionCreateGood";
import {actionGoodCount} from "../../../actions/ActionGoodFind";
import {actionUploadFiles} from "../../../actions/ActionUploadFile";
import {actionClearPromise} from "../../../reducers/PromiseReducer";
const GoodEdit = ({entity={images: [], categories: []},
onSave,
onFileDrop,
fileStatus,
categoryState,
actionRootCat,
goodCount,
goods,
actionClear,
result}) => {
const [state, setState] = useState(entity)
const {getRootProps, getInputProps, isDragActive} = useDropzone({
accept: 'image/*', onDrop: acceptedFiles => {
// acceptedFiles.forEach(async file => {
// await onFileDrop(file)
// })
onFileDrop(acceptedFiles)
}})
const SortableItem = sortableElement(({value}) => {
return (
{value?.url ?
<>
> :
}
)
});
const SortableContainer = sortableContainer(({children}) => {
return (
)
})
const onSortEnd = ({oldIndex, newIndex}) => {
setState(({images}) => ({
...state,
images: arrayMoveImmutable(images, oldIndex, newIndex),
}));
}
const handleClear = () => {
setState(entity)
}
const handleOnSave = () => {
let query = {...state}
state.images?.length > 0 ?
query.images = state.images.map(item => {return {'_id': item['_id']}})
:
delete query.images
state.categories?.length > 0 ?
query.categories = state.categories.map(item => {return {'_id': item['_id'], 'name': item['name']}})
:
delete query.categories
onSave(query)
goodCount()
}
const handleFullClear = () => {
goodCount()
setState(entity)
actionClear('goodUpsert')
actionClear('uploadFile')
}
useEffect(() => {
if(!categoryState) actionRootCat()
if(!goods) goodCount()
if(fileStatus?.status === 'RESOLVED'){
state.images?.length > 0 ?
setState({...state, images: [...state.images, fileStatus?.payload]})
:
setState({...state, images: [fileStatus?.payload]})
}
},[categoryState, goods, fileStatus])
return (
<>
{!result ?
<>
Total products: {goods?.payload || 0}
{isDragActive ?
Drop the file here ...
:
Drag 'n' drop image files here, or click to select file
}
{state.images?.length > 0 && state.images.map((value, index) => (
))}
setState({...state, name: e.target.value})}
/>
{categoryState && categoryState?.payload && categoryState.payload?.length > 0 &&
<>
{state.categories?.length > 0 ?
{
setState({...state, categories: [...newValue]})
}}
getOptionLabel={(option) => option?.name || 'no name'}
key={option => option?.id}
renderInput={(params) => (
)}
/> :
{
setState({...state, categories: [...newValue]})
}}
getOptionLabel={(option) => option?.name || 'no name'}
key={option => option?.id}
renderInput={(params) => (
)}
/>
}
>
}
setState({...state,
price: parseFloat(e.target.value < 0 ? 0 : e.target.value)})
}
/>
setState({...state, description: e.target.value})}
/>
> :
result?.payload?._id ?
<>
Product successfully created!
View results
> :
result?.error ?
Fatal error, try again!
:
}
>
)
}
export const CGoodEdit = connect(state => ({
fileStatus: state.promise['uploadFile'],
categoryState: state.promise['allCategory'],
goods: state.promise['goodCount'],
result: state.promise['goodUpsert']}),
{
actionRootCat: actionAllCategory,
onSave: actionGoodUpsert,
goodCount: actionGoodCount,
onFileDrop: actionUploadFiles,
actionClear: actionClearPromise})
(GoodEdit)