import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";

export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => {
    const context = useContext(RecurringExpenseContext);
    if (!context) {
        throw new Error("useRecurringExpenseContext must be used within an ExpenseProvider");
    }
    return context;
};
const RecurringExpensePage = () => {
    const [ManageRequest, setManageRequest] = useState({
        IsOpen: null,
        RecurringId: null,
    });
    const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })

    const [selectedStatuses, setSelectedStatuses] = useState(
        PAYEE_RECURRING_EXPENSE.map((s) => s.id)
    );

    const [search, setSearch] = useState("");

    const contextValue = {
        setManageRequest,
        setVieRequest
    };

    const handleStatusChange = (id) => {
        setSelectedStatuses((prev) =>
            prev.includes(id)
                ? prev.filter((s) => s !== id)
                : [...prev, id]
        );
    };


    return (
        <RecurringExpenseContext.Provider value={contextValue}>
            <div className="container-fluid">
                {/* Breadcrumb */}
                <Breadcrumb
                    data={[
                        { label: "Home", link: "/dashboard" },
                        { label: "Recurring Expense", link: null },
                    ]}
                />

                {/* Top Bar */}
                <div className="card my-3 px-sm-4 px-0">
                    <div className="card-body py-2 px-1">
                        <div className="d-flex flex-wrap align-items-center justify-content-between">
                            {/* Left side: Search + Filter */}
                            <div className="d-flex align-items-center flex-wrap">
                                <input
                                    type="search"
                                    className="form-control form-control-sm w-auto"
                                    placeholder="Search Recurring Expense..."
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                />

                                <div className="dropdown">
                                    <a
                                        className="dropdown-toggle hide-arrow cursor-pointer p-1"
                                        data-bs-toggle="dropdown"
                                        aria-expanded="false"
                                        title="Filter"
                                    >
                                        <i className="bx bx-slider-alt ms-1"></i>
                                    </a>
                                    <ul className="dropdown-menu p-2 text-capitalize">
                                        {PAYEE_RECURRING_EXPENSE.map(({ id, label }) => (
                                            <li key={id}>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        checked={selectedStatuses.includes(id)}
                                                        onChange={() => handleStatusChange(id)}
                                                    />
                                                    <label className="form-check-label">{label}</label>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </div>

                            {/* Right side: Add Button */}
                            <div className="mt-2 mt-sm-0">
                                <button
                                    className="btn btn-sm btn-primary"
                                    type="button"
                                    onClick={() =>
                                        setManageRequest({
                                            IsOpen: true,
                                            expenseId: null,
                                        })
                                    }
                                >
                                    <i className="bx bx-plus-circle me-2"></i>
                                    <span className="d-none d-md-inline-block">
                                        Add Recurring Expense
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <RecurringExpenseList filterStatuses={selectedStatuses} search={search} />

                {/* Add/Edit Modal */}
                {ManageRequest.IsOpen && (
                    <GlobalModel
                        isOpen
                        size="lg"
                        closeModal={() =>
                            setManageRequest({ IsOpen: null, expenseId: null })
                        }
                    >
                        <ManageRecurringExpense
                            key={ManageRequest.RecurringId ?? "new"}
                            requestToEdit={ManageRequest.RecurringId}
                            closeModal={() =>
                                setManageRequest({ IsOpen: null, RecurringId: null })
                            }
                        />
                    </GlobalModel>
                )}

                {/* {ViewRequest.view && (
          <GlobalModel
            isOpen
            size="xl"
            modalType="top"
            closeModal={() => setVieRequest({ requestId: null, view: false })}
          >
            <ViewPaymentRequest  requestId={ViewRequest?.requestId}/>
          </GlobalModel>
        )} */}

            </div>
        </RecurringExpenseContext.Provider>
    );
};

export default RecurringExpensePage;