import {useEffect, useState} from "react";
import {useDropzone} from "react-dropzone";
import {sortableContainer, sortableElement} from "react-sortable-hoc";
import {arrayMoveImmutable} from "array-move";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import {
Button,
CircularProgress, Container,
Grid, IconButton,
InputAdornment,
TextField
} from "@mui/material";
import {connect} from "react-redux";
import {actionAllCategory} from "../../actions/ActionCategory";
import {actionGoodUpsert} from "../../actions/ActionCreateGood";
import Autocomplete from "@mui/material/Autocomplete";
import {actionFullGoodFind, actionGoodCount} from "../../actions/ActionGoodFind";
import {actionUploadFile} from "../../actions/ActionUploadFile";
import {backURL} from "../../actions/PathDB";
import {actionClearPromise} from "../../reducers/PromiseReducer";
import {Link} from "react-router-dom";
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import SearchIcon from "@material-ui/icons/Search";
import imgNotFound from "../../img/catalog/imgNotFound.png";
import {actionSearchRemove} from "../../reducers/SearchReducer";
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)
})
}})
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 = () => {
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: actionUploadFile, actionClear: actionClearPromise})(GoodEdit)
const ItemFound = ({item:{_id, name, price, images, description, categories}}) => {
let [state, setState] = useState(false)
return (
!state ?
:
)
}
const NotFound = () => {
return (
No results found
)
}
const FindGoodEdit = ({searchResult, onSearch, onSearchRemove}) => {
const [value, setValue] = useState('')
const [click, setClick] = useState(false)
return (
<>
WHICH ITEM TO EDIT?
{setClick(false); setValue(event.target.value); onSearchRemove()}}
InputProps={{
sx: {padding: '10px', outline:'none', color: '#616161', fontWeight: '300', letterSpacing: '1px', marginBottom: '50px'},
endAdornment: (
{setClick(true); onSearchRemove(); onSearch(value)}}>
)
}}
/>
{(value !== '' && click) && (searchResult?.searchResult ?
Object.values(searchResult.searchResult).length > 0 ?
Object.values(searchResult.searchResult).map(item => ) : :
)}
>
)
}
export const CFindGoodEdit = connect(state=>({searchResult: state.search}),
{onSearch: actionFullGoodFind, onSearchRemove: actionSearchRemove})(FindGoodEdit)