import ProductCard from "./ProductCard";
import {Modal} from "react-bootstrap";
import React, {useState} from "react";
import AdminApi from "../../api/AdminApi";
import LoadingTemplate from "../../Components/common/LoadingTemplate";
import DangerButton from "../../Components/DangerButton";
import SecondaryButton from "../../Components/SecondaryButton";
import Button from "../Button"

export default function ProductsGrid({products, category=''}) {
    const [deleteLoading, setDeleteLoading] = useState(false)
    const [showDeleteModal, setShowDeleteModal] = useState(false)
    const [deleteId, SetDeleteId] = useState(-1);
    const handleDeleteModal = (id) => {
        SetDeleteId(id);
        setShowDeleteModal(!showDeleteModal)
    }
    const handleDelete = async () => {
        setDeleteLoading(true)
        await AdminApi.delete(`products/delete/${deleteId}`).then(() => {
            window.location = '/panel/products'
        })
        setDeleteLoading(false)
    }
    return (
        <div className={'flex grid grid-cols-12 gap-7'}>
            {
                products.map((product, index) => (
                    <ProductCard category={category} key={index} product={product} onDelete={handleDeleteModal} />
                ))
            }
            <Modal size={'md'} centered show={showDeleteModal} onHide={handleDeleteModal}>
                <Modal.Header closeButton={true} className={'flex flex-row-reverse'}>
                    <Modal.Title className={'font-[Vazirmatn] text-lg'}>آیا از حذف این محصول اطمینان دارید؟</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div className={'w-full flex flex-row items-center justify-between px-5'}>
                        <LoadingTemplate loading={deleteLoading} className={'mx-2'} marginLeft={'-12px'}>
                            <Button className={'font-[Vazirmatn] w-full flex justify-center items-center tracking-tight bg-3'} onClick={handleDelete}>حذف</Button>
                        </LoadingTemplate>
                        <Button disabled={deleteLoading} className={'font-[Vazirmatn] w-full flex justify-center items-center mx-2 tracking-tight border'} onClick={handleDeleteModal}>لغو</Button>
                    </div>
                </Modal.Body>
            </Modal>
        </div>
    )
}