import { Container, Col, Row, Button, Modal } from 'react-bootstrap';
import StoreItem from '../../molecules/StoreItem';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import DataStorage from '../../organisms/DataStorage';
import AdminTemplate from '../../templates/AdminTemplate';

export default function AdminBranchPage() {

    const [stores, setStores] = useState([]); // Lưu danh sách chi nhánh
    const [loading, setLoading] = useState(true); // Trạng thái tải dữ liệu
    const [selectedStore, setSelectedStore] = useState(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const navigate = useNavigate();

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

    useEffect(() => {
        // Gọi API lấy danh sách chi nhánh
        const fetchBranches = async () => {
            try {
                const response = await axios.get(process.env.REACT_APP_API_URL + '/branchs'); // Thay 'API_ENDPOINT' bằng URL của API
                setStores(response.data); // Lưu dữ liệu vào state
                setLoading(false); // Đặt loading thành false khi hoàn tất
                CacheStorage.set('stores', JSON.stringify(Object(response.data)));
            } catch (error) {
                console.error('Error fetching branches:', error);
                setLoading(false); // Đặt loading thành false nếu lỗi
            }
        };
        fetchBranches();
    }, []);

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

    // Đóng modal
    const handleCloseDeleteModal = () => {
        setShowDeleteModal(false);
        setSelectedStore(null);
    };

    function truncateText(text, maxLength = 120) {
        if (text.length <= maxLength) {
            return text;
        }
        return text.slice(0, maxLength) + '...Xem thêm';
    }

    let storesContent;

    if (loading) {
        storesContent = (<p>Đang tải danh sách chi nhánh...</p>); // Hiển thị thông báo khi đang tải dữ liệu
    } else {
        storesContent = (<Col xs={12} md={9}>
            <Container fluid>
                <Row xs={1} md={2} xl={3} className="g-4">
                    {Array.from(stores).map((store, idx) => (
                        <Col key={idx}>
                            <StoreItem storeName={store.name}
                                address={truncateText(store.location)}
                                imageSrc={store.image_url}
                                deleteable={true}
                                delButtonCallback={(e) => {
                                    e.preventDefault();
                                    handleShowDeleteModal(store.id);
                                }}
                                storeHref={`/admin-branchs?id=${store.id}`}
                            >
                            </StoreItem>
                        </Col>
                    ))}
                </Row>
            </Container>
        </Col>)
    }

    const confirmDelete = async () => {
        if (selectedStore) {
            axios.delete(process.env.REACT_APP_API_URL + `/branchs/${selectedStore}`)
                .then((response) => {
                    handleCloseDeleteModal(); // Đóng modal sau khi xóa
                    window.location.reload(); // Load lại trang
                })
                .catch((error) => console.error("Xóa bài đăng thất bại:", error))
        }
    };

    return (
        <AdminTemplate content={
            (<Container fluid className="text-center justify-content-center align-items-center my-5" style={{ maxWidth: "90%" }}>
                {/* 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 chi nhánh này 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>

                <h1 className='mb-5'>Danh sách các chi nhánh</h1>
                <Row className='my-5 justify-content-center align-items-center'>
                    <Col xs={8} md={4} lg={2}>
                        <Button as='a' href={`/admin-branchs`}>
                            Bổ sung chi nhánh mới
                        </Button>
                    </Col>
                </Row>
                <Row className="align-items-center">
                    {storesContent}
                </Row>
            </Container>)
        } />
    );
}