import React, { useState } from "react";
import { updatePost } from "../../actions/postEdite";
import { Box, Button, TextField } from "@mui/material";


const EditPost = ({ onCloseModall, post }) => {
    const [title, setTitle] = useState(post.title);
    const [text, setText] = useState(post.text);


    const handleEdit = async () => {
        try {
            updatePost(post._id,title,text)
        }
        catch (err) {
            console.log(err)
        }finally{
            window.location.reload()
        }
    };

    return (
        <div className="modal">
            <div className="modal_block">
                <h1>Edit Post</h1>

                <div style={{ width:'400px', height:'400px', marginTop: 10, display: "flex", flexDirection: "column", gap: 15 }} className="edit_inputs">
                    <img src={`../${post?.images?.[0]?.url}`} />
                    <TextField
                        type="text"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                        label="Ttle"
                    />
                    <TextField
                        type="text"
                        value={text}
                        onChange={(e) => setText(e.target.value)}
                        label="Text"
                    />
                </div>
                <Box sx={{ gap: "12px", display: "flex", marginTop: "10px" }}>
                    <button className="edt_btn" onClick={handleEdit}>
                        Save
                    </button>
                    <button className="cncl_btn" onClick={onCloseModall}>
                        Cancel
                    </button>
                </Box>
            </div>
        </div>
    );
};

export default EditPost;
