import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {DealProductServiceSchema, ServiceSchema} from "../../../client";
import {ContextModalProps} from "@mantine/modals";
import {useForm, UseFormReturnType} from "@mantine/form";
import {isNil, isNumber} from "lodash";
import ServiceWithPriceInput from "../../../components/ServiceWithPriceInput/ServiceWithPriceInput.tsx";
import {Flex} from "@mantine/core";
import {ServiceType} from "../../../shared/enums/ServiceType.ts";
import {useSelector} from "react-redux";
import {RootState} from "../../../redux/store.ts";

type RestProps = {
    quantity: number;
    serviceIds: number[];
}
type Props = CreateEditFormProps<DealProductServiceSchema> & RestProps;

const ProductServiceFormModal = ({
                                     context,
                                     id, innerProps
                                 }: ContextModalProps<Props>) => {
    const authState = useSelector((state: RootState) => state.auth);

    const isEditing = 'onChange' in innerProps;
    const initialValues: Partial<DealProductServiceSchema> = isEditing ? innerProps.element : {
        service: undefined,
        price: undefined,
        employees: []
    }
    const form = useForm<Partial<DealProductServiceSchema>>({
        initialValues,
        validate: {
            service: (service?: ServiceSchema) => isNil(service) || service.id < 0 ? 'Укажите услугу' : null,
            price: (price?: number) => !isNumber(price) || price < 0 ? 'Укажите цену' : null
        }
    })
    const onClose = () => {
        context.closeContextModal(id);
    }
    return (
        <BaseFormModal
            {...innerProps}
            form={form as UseFormReturnType<DealProductServiceSchema>}
            onClose={onClose}
            closeOnSubmit
        >
            <BaseFormModal.Body>
                <>
                    <Flex w={"100%"}>

                        <ServiceWithPriceInput
                            serviceProps={{
                                ...form.getInputProps('service'),
                                label: "Услуга",
                                placeholder: "Выберите услугу",
                                disabled: isEditing,
                                filterBy: (item) => !innerProps.serviceIds.includes(item.id) || isEditing,
                                style: {width: "100%"}
                            }}
                            priceProps={{
                                ...form.getInputProps('price'),
                                label: "Цена",
                                placeholder: "Введите цену",
                                style: {width: "100%"},
                                disabled: authState.isGuest
                            }}
                            filterType={ServiceType.PRODUCT_SERVICE}
                            containerProps={{
                                direction: "column",
                                style: {width: "100%"}

                            }}
                            lockOnEdit={isEditing}
                            quantity={innerProps.quantity}
                        />
                    </Flex>

                </>
            </BaseFormModal.Body>
        </BaseFormModal>

    )
}
export default ProductServiceFormModal;