"use client"

import ActionTable from "@/components/module/action-table"
import DataTable from "@/components/module/data-table"
import { usePricePlan } from "../view-model"
import QueryWrapper from "@/components/module/query-wrapper"
import React from "react"
import PricePlanColumns from "../constant"
import ModalCreatePriceplan from "./modal-create-priceplan"
import pricePlanStore from "../store"
import pricePlanFormStore from "../store/form-store"
import { observer } from "mobx-react-lite"

const Content = observer(() => {

    const pricePlanVM = usePricePlan(pricePlanStore.getCurrentPage(), pricePlanStore.getSize(), pricePlanStore.getType(), pricePlanFormStore.resetForm)
    const data = pricePlanVM.data
    const extra = pricePlanVM.extra
    const ppTypes = pricePlanVM.ppTypes
    const serviceTypes = pricePlanVM.serviceTypes

    return (
        <div>
            <ActionTable onClickNew={() => pricePlanFormStore.setIsOpen(true)} />
            <DataTable
                data={data.getContent()}
                columns={PricePlanColumns({
                    onClickDelete: (id: string) => {
                        pricePlanStore.setIsAlertOpen(true)
                        pricePlanStore.setPricePlanId(id)
                    }
                })}
                pagination={{
                    pageIndex: data.getCurrentPage(),
                    pageSize: data.getPageSize(),
                    pageCount: data.getTotalPages(),
                    setPageIndex: pricePlanStore.setCurrentPage,
                    setPageSize: pricePlanStore.setSize,
                }}
                alertDialog={{
                    isOpen: pricePlanStore.getIsAlertOpen(),
                    onCancel: () => pricePlanStore.setIsAlertOpen(false),
                    onConfirm: () => extra.deletePricePlan(pricePlanStore.getPricePlanId()),
                    setOpen: pricePlanStore.setIsAlertOpen
                }}
            />
            <ModalCreatePriceplan
                ppTypes={ppTypes}
                serviceTypes={serviceTypes}
                onConfirm={extra.createPricePlan}
                onOpenChange={(val) => pricePlanFormStore.setIsOpen(val)}
            />
        </div>
    )
})

const PricePlanList = () => {
    return (
        <QueryWrapper>
            <Content />
        </QueryWrapper>
    )
}

export default PricePlanList