"use client";

import { useState } from "react";
import { Fieldset, Flex, NumberInput, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import ServiceCategorySelect from "@/app/services/components/shared/ServiceCategorySelect/ServiceCategorySelect";
import ServiceTypeSegmentedControl from "@/app/services/components/shared/ServiceTypeSegmentedControl/ServiceTypeSegmentedControl";
import RangePriceInput, {
    PriceRangeInputType,
} from "@/app/services/modals/ServiceEditorModal/components/RangePriceInput";
import ServicePriceTypeSegmentedControl from "@/app/services/modals/ServiceEditorModal/components/ServicePriceTypeSegmentedControl";
import {
    CreateServiceSchema,
    ServiceSchema,
    UpdateServiceSchema,
} from "@/lib/client";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";
import {
    ServicePriceType,
    ServiceType,
} from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/types/service";

type Props = CreateEditFormProps<
    CreateServiceSchema,
    UpdateServiceSchema,
    ServiceSchema
>;

const ServiceEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const [priceType, setPriceType] = useState<ServicePriceType>(
        ServicePriceType.DEFAULT
    );

    const initialValues = innerProps.isEditing
        ? innerProps.entity
        : {
              name: "",
              price: 0,
              cost: 0,
              serviceType: ServiceType.DEAL_SERVICE,
              priceRanges: [],
              lexorank: "",
          };

    const form = useForm<Partial<ServiceSchema>>({
        initialValues,
        validate: {
            name: name =>
                (!name || name.trim() === "") &&
                "Необходимо ввести название услуги",
            category: category => !category && "Необходимо выбрать категорию",
            priceRanges: (value, values) =>
                (!value || value.length === 0) &&
                (!values.price || values.price <= 0) &&
                "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги",
            price: (value, values) =>
                (!value || value === 0) &&
                (!values.priceRanges || values.priceRanges.length === 0) &&
                "Необходимо добавить хотя бы один диапазон цен или указать цену за единицу услуги",
            cost: cost => (!cost || cost < 0) && "Введите себестоимость",
        },
    });

    const getPriceBody = () => {
        if (priceType === ServicePriceType.DEFAULT)
            return (
                <NumberInput
                    placeholder={"Введите стоимость услуги"}
                    label={"Cтоимость услуги"}
                    hideControls
                    {...form.getInputProps("price")}
                />
            );

        return (
            <RangePriceInput
                {...(form.getInputProps("priceRanges") as PriceRangeInputType)}
            />
        );
    };

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

    return (
        <BaseFormModal
            {...innerProps}
            closeOnSubmit
            form={form}
            onClose={onCancel}>
            <Fieldset
                legend={"Общие параметры"}
                bdrs={"lg"}>
                <Stack>
                    <ServiceCategorySelect
                        placeholder={"Выберите категорию"}
                        label={"Категория услуги"}
                        {...form.getInputProps("category")}
                    />
                    <TextInput
                        placeholder={"Введите название услуги"}
                        label={"Название услуги"}
                        {...form.getInputProps("name")}
                    />
                    <NumberInput
                        placeholder={"Введите себестоимость услуги"}
                        label={"Себестоимость услуги"}
                        hideControls
                        {...form.getInputProps("cost")}
                        allowNegative={false}
                    />
                    <ServiceTypeSegmentedControl
                        {...form.getInputProps("serviceType")}
                    />
                </Stack>
            </Fieldset>
            <Fieldset
                legend={"Стоимость"}
                bdrs={"lg"}>
                <Flex
                    direction={"column"}
                    gap={"xs"}
                    justify={"center"}>
                    <ServicePriceTypeSegmentedControl
                        value={priceType}
                        onChange={setPriceType}
                    />
                    {getPriceBody()}
                </Flex>
            </Fieldset>
        </BaseFormModal>
    );
};

export default ServiceEditorModal;
