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

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

export default function AdminBranchEditPage() {

    const [error, setError] = useState("");
    const [searchParams] = useSearchParams();
    const storeId = searchParams.get('id') || null;

    const [storeDetail, setStoreItem] = useState({
        name:'',
        location:'',
        image_url:''
    });
    const [initialUrl, setInitialUrl] = useState("");
    const [initialTitle, setInitialTitle] = useState("");
    const [initialDesc, setInitialDesc] = useState("");
    // const [loading, setLoading] = useState(true);
    const [isChanged, setChanged] = useState(false);

    const navigate = useNavigate();

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

    const checkChange = () => {
        if (storeDetail.name.trim() !== initialTitle.trim()
            || storeDetail.location.trim() !== initialDesc.trim()
            || storeDetail.image_url.trim() !== initialUrl.trim()) {
            setChanged(true);
        } else {
            setChanged(false);
        }
    }

    const handleChange = (e) => {
        const { name, value } = e.target;
        setStoreItem({ ...storeDetail, [name]: value });
        checkChange();
    };

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

    useEffect(() => {
        if (storeId) {
            axios.get(process.env.REACT_APP_API_URL + `/branchs/${storeId}`)
                .then((response) => {
                    setStoreItem(response.data);
                    // setLoading(false);
                    setInitialTitle(response.data.name);
                    setInitialDesc(response.data.location);
                    setInitialUrl(response.data.image_url);
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        }
    }, [storeId]);

    const handleSubmit = () => {
        const submit_data = {
            'name': storeDetail.name,
            'location': storeDetail.location,
            'image_url': storeDetail.image_url
        }
        if (storeId) {
            axios.patch(process.env.REACT_APP_API_URL + `/branchs/${storeId}`, submit_data)
                .then((response) => {
                    // setFeedItem(response.data);
                    // // setLoading(false);
                    // setInitialDesc(response.data.description);
                    // setInitialTitle(response.data.title);
                    // setChanged(false);
                    navigate('/admin-branchs-list');
                    // window.location.reload();
                })
                .catch((error) => {
                    setError(JSON.stringify(error));
                })
        } else {
            axios.post(process.env.REACT_APP_API_URL + `/branchs`, submit_data)
            .then((response) => {
                navigate('/admin-branchs-list');
            })
            .catch((error) => {
                setError(JSON.stringify(error));
            })
        }
    }

    return (
        <AdminTemplate content={
            (
                <Container fluid className="d-flex align-items-center justify-content-center mt-5">
                    <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'>{storeId ? '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={storeDetail.image_url} // Hiển thị ảnh đại diện từ URL
                                                    alt="Ảnh mô tả"
                                                    width="auto"
                                                    height={400}
                                                    className="mb-3"
                                                />
                                                <Form.Group controlId="formImageUrl">
                                                    <Form.Label>URL ảnh mô tả</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        placeholder="Nhập URL ảnh"
                                                        value={storeDetail.image_url || ''}
                                                        onChange={handleAvatarUrlChange} // Gọi hàm khi URL thay đổi
                                                    />
                                                </Form.Group>
                                            </Col>
                                            <Col xs={12} className="mb-3">
                                                <Form.Group controlId="formTitle">
                                                    <Form.Label>Tên chi nhánh</Form.Label>
                                                    <Form.Control
                                                        type="text"
                                                        name="name"
                                                        placeholder={storeId ? 'Đang tải dữ liệu...' : 'Tên chi nhánh'}
                                                        value={storeDetail.name || ''}
                                                        onChange={handleChange}
                                                    />
                                                </Form.Group>
                                            </Col>
                                        </Row>

                                        <Form.Group controlId="formText" className="mb-3">
                                            <Form.Label>Địa chỉ</Form.Label>
                                            <Form.Control
                                                as="textarea"
                                                name="location"
                                                placeholder={storeId ? 'Đang tải dữ liệu...' : 'Địa chỉ'}
                                                rows={5}
                                                value={storeDetail.location || ''}
                                                onChange={handleChange}
                                            />
                                        </Form.Group>

                                        <Button variant="primary" type="button" disabled={!isChanged} onClick={handleSubmit}>
                                            {storeId ? 'Cập nhật' : 'Tạo mới'}
                                        </Button>
                                    </Form>
                                </Card.Body>
                            </Card>

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