frontend/src/pages/admin-pages/AdminMenuEditPage.js

import { useState, useEffect } from 'react';
import { Modal, Button, Container, Row, Col, Card, Form, Alert, Image } from 'react-bootstrap';
import AdminTemplate from "../../templates/AdminTemplate";
import DataStorage from '../../organisms/DataStorage';
import axios from 'axios';
import { useNavigate, useSearchParams } from 'react-router-dom';

export default function AdminMenuEditPage() {

    const navigate = useNavigate();

    useEffect(() => {
        if (!DataStorage.get('isLoggedInAdmin')) {
            navigate('/admin-login');
        }
    }, [navigate]);

    const [searchParams] = useSearchParams();
    const selectedItem = searchParams.get('id') || null;

    const [error, setError] = useState("");
    // const [loading, setLoading] = useState(true);
    const [itemDetails, setItemDetails] = useState({
        id: '',
        item_name: '',
        item_type: '1',
        price: '',
        description: '',
        image_url: ''
    });
    const [showDeleteModal, setShowDeleteModal] = useState(false);

    const handleShowDeleteModal = () => {
        setShowDeleteModal(true);
    }

    const handleCloseDeleteModal = () => {
        setShowDeleteModal(false);
    }

    const handleSubmit = async () => {
        itemDetails.price = Number(itemDetails.price);
        itemDetails.item_type = Number(itemDetails.item_type);
        if (selectedItem) {
            axios.patch(process.env.REACT_APP_API_URL + `/menu-items/${selectedItem}`, itemDetails)
                .then((response) => {
                    navigate('/admin-menu');
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        } else {
            axios.post(process.env.REACT_APP_API_URL + `/menu-items`, itemDetails)
                .then((response) => {
                    navigate('/admin-menu');
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        }
    }

    const handleChange = (e) => {
        const { name, value } = e.target;
        setItemDetails((prevDetails) => ({
            ...prevDetails,
            [name]: value, // Sử dụng tên của field để cập nhật động
        }));
    };

    const handleAvatarUrlChange = (e) => {
        const url = e.target.value;
        setItemDetails((prevData) => ({
            ...prevData,
            image_url: url // Cập nhật URL ảnh
        }));
        console.log(url);
    };

    const confirmDelete = async () => {
        if (selectedItem) {
            axios.delete(process.env.REACT_APP_API_URL + `/menu-items/${selectedItem}`)
                .then((response) => {
                    handleCloseDeleteModal();
                    navigate('/admin-menu');
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        }
    }

    useEffect(() => {
        const fetchItemDetail = async () => {
            if (selectedItem) {
                try {
                    const response = await axios.get(process.env.REACT_APP_API_URL + `/menu-items/${selectedItem}`);
                    setItemDetails(response.data);
                    // setLoading(false);
                } catch (error) {
                    setError(JSON.stringify(error));
                }
            } else {
                setItemDetails(
                    {
                        id: '',
                        item_name: '',
                        item_type: '1',
                        price: '',
                        description: '',
                        image_url: ''
                    }
                )
            }
        }
        fetchItemDetail();
    }, [selectedItem])

    return (
        <AdminTemplate content={(
            <Container className='text-center align-items-center justify-content-center' style={{ minHeight: '80vh' }}>
                {/* Modal xác nhận xóa */}
                <Modal show={showDeleteModal} onHide={handleCloseDeleteModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>Xác nhận xóa</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>Bạn có chắc chắn muốn xóa món này khỏi menu không?</Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={handleCloseDeleteModal}>
                            Hủy
                        </Button>
                        <Button variant="danger" onClick={confirmDelete}>
                            Xóa
                        </Button>
                    </Modal.Footer>
                </Modal>

                <Row className="align-items-center">
                    {/* <Col xs={1} md={2}></Col> */}
                    <Col>
                        <Card style={{ width: '100%' }} className='justify-content-center'>
                            <Card.Header>
                                <Card.Title className='mt-1 text-center'>{selectedItem ? 'Chỉnh sửa thông tin chi nhánh' : 'Tạo chi nhánh'}</Card.Title>
                            </Card.Header>
                            <Card.Body>

                                <Form>
                                    {error && <Alert variant="danger">{error}</Alert>}
                                    <Row className="mb-3">
                                        <Col xs={12} className="text-center mb-3">
                                            {/* Hiển thị ảnh từ URL */}
                                            <Image
                                                src={itemDetails.image_url || ''} // Hiển thị ảnh đại diện từ URL
                                                alt="Ảnh món"
                                                style={{ width: "100%", maxWidth: "100%", height: "auto" }}
                                                className="mb-3"
                                            />
                                            <Form.Group controlId="formImageUrl">
                                                <Form.Label>URL ảnh món</Form.Label>
                                                <Form.Control
                                                    type="text"
                                                    placeholder="Nhập URL ảnh"
                                                    value={itemDetails.image_url || ''}
                                                    onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
                                                />
                                            </Form.Group>
                                        </Col>
                                        <Col xs={12} className="mb-3">
                                            <Form.Group controlId="formName">
                                                <Form.Label>Tên món</Form.Label>
                                                <Form.Control
                                                    type="text"
                                                    name="item_name"
                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Tên món'}
                                                    value={itemDetails.item_name || ''}
                                                    onChange={handleChange}
                                                />
                                            </Form.Group>
                                        </Col>
                                        <Col xs={12} className="mb-3">
                                            <Form.Group controlId="formName">
                                                <Form.Label>Id món</Form.Label>
                                                <Form.Control
                                                    type="text"
                                                    name="id"
                                                    disabled={selectedItem ? true : false}
                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Mã id món'}
                                                    value={itemDetails.id || ''}
                                                    onChange={handleChange}
                                                />
                                            </Form.Group>
                                        </Col>
                                        <Col xs={12} className="mb-3">
                                            <Form.Group controlId="formText" className="mb-3">
                                                <Form.Label>Mô tả món</Form.Label>
                                                <Form.Control
                                                    as="textarea"
                                                    name="description"
                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Mô tả món'}
                                                    rows={3}
                                                    value={itemDetails.description || ''}
                                                    onChange={handleChange}
                                                />
                                            </Form.Group>
                                        </Col>

                                        <Col xs={12} className='mb-3'>
                                            <Form.Group controlId="formType" className="mb-3">
                                                <Form.Label>Chọn danh mục món ăn</Form.Label>
                                                <Form.Select name='item_type' value={itemDetails.item_type || '1'} onChange={handleChange}>
                                                    <option value="1">Món chính</option>
                                                    <option value="2">Tráng miệng</option>
                                                    <option value="3">Đồ uống</option>
                                                </Form.Select>
                                            </Form.Group>
                                        </Col>

                                        <Col xs={12} className='mb-5'>
                                            <Form.Group>
                                                <Form.Label>Nhập giá tiền</Form.Label>
                                                <Form.Control
                                                    type='text'
                                                    name='price'
                                                    placeholder={selectedItem ? 'Đang tải dữ liệu...' : 'Giá món'}
                                                    value={itemDetails.price || ''}
                                                    onChange={handleChange}
                                                />
                                            </Form.Group>
                                        </Col>

                                        <Col xs={12} className='mb-3'>
                                            <Button variant="primary" type="button" className='mx-5' onClick={handleSubmit}>
                                                {selectedItem ? 'Cập nhật' : 'Tạo mới'}
                                            </Button>
                                            {selectedItem ?
                                                (<Button variant="danger" type="button" className='mx-5' onClick={handleShowDeleteModal}>
                                                    Xóa
                                                </Button>) : (<></>)
                                            }
                                        </Col>
                                    </Row>
                                </Form>
                            </Card.Body>
                        </Card>

                    </Col>
                    {/* <Col xs={1} md={2}></Col> */}
                </Row>
            </Container>
        )} />
    )
}