"use client";

import { isNil, isNumber } from "lodash";
import { Checkbox, Flex } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import {
    CreateProductServiceSchema,
    ProductServiceSchema,
    UpdateProductServiceSchema,
} from "@/lib/client/index.js";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";
import ServiceWithPriceInput from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/DealServiceEditorModal/components/ServiceWithPriceInput";
import { ServiceType } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/types/service";

type RestProps = {
    quantity: number;
    excludeServiceIds: number[];
};

type Props = CreateEditFormProps<
    CreateProductServiceSchema,
    UpdateProductServiceSchema,
    ProductServiceSchema
> &
    RestProps;

const ProductServiceEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const initialValues: Partial<ProductServiceSchema> = innerProps.isEditing
        ? innerProps.entity
        : {
              service: undefined,
              serviceId: undefined,
              price: undefined,
              isFixedPrice: false,
          };

    const form = useForm<Partial<ProductServiceSchema>>({
        initialValues,
        validate: {
            service: service =>
                (isNil(service) || service.id < 0) && "Укажите услугу",
            price: price => (!isNumber(price) || price < 0) && "Укажите цену",
        },
    });

    const onClose = () => context.closeContextModal(id);

    return (
        <BaseFormModal
            {...innerProps}
            form={form}
            onClose={onClose}
            closeOnSubmit>
            <Flex
                w={"100%"}
                direction={"column"}
                gap={"xs"}>
                <ServiceWithPriceInput
                    serviceProps={{
                        ...form.getInputProps("service"),
                        onChange: value => {
                            form.setFieldValue("service", value);
                            form.setFieldValue("serviceId", value.id);
                        },
                        label: "Услуга",
                        placeholder: "Выберите услугу",
                        disabled: innerProps.isEditing,
                        filterBy: item =>
                            !innerProps.excludeServiceIds.includes(item.id) ||
                            innerProps.isEditing,
                    }}
                    priceProps={{
                        ...form.getInputProps("price"),
                        label: "Цена",
                        placeholder: "Введите цену",
                    }}
                    filterType={ServiceType.PRODUCT_SERVICE}
                    lockOnEdit={innerProps.isEditing}
                    quantity={innerProps.quantity}
                />
                <Checkbox
                    {...form.getInputProps("isFixedPrice", {
                        type: "checkbox",
                    })}
                    label={"Зафиксировать цену"}
                    placeholder={"Зафиксировать цену"}
                />
            </Flex>
        </BaseFormModal>
    );
};
export default ProductServiceEditorModal;
