import {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
import {ServiceSchema} from "../../client";
import {Flex, FlexProps, NumberInput, NumberInputProps, rem} from "@mantine/core";
import {FC, useEffect, useRef, useState} from "react";
import ServiceSelectNew from "../Selects/ServiceSelectNew/ServiceSelectNew.tsx";
import {ServiceType} from "../../shared/enums/ServiceType.ts";

type ServiceProps = Omit<ObjectSelectProps<ServiceSchema>, 'data'>;
type PriceProps = NumberInputProps;

type Props = {
    serviceProps: ServiceProps,
    priceProps: PriceProps,
    quantity: number,
    containerProps: FlexProps,
    filterType?: ServiceType,
    lockOnEdit?: boolean
}
const ServiceWithPriceInput: FC<Props> = ({
                                              serviceProps,
                                              priceProps,
                                              quantity,
                                              containerProps,
                                              filterType = ServiceType.PRODUCT_SERVICE,
                                              lockOnEdit = true
                                          }) => {
    const [price, setPrice] = useState<number | undefined>(
        typeof priceProps.value === 'number' ? priceProps.value : undefined);
    const [service, setService] = useState<ServiceSchema | undefined>(serviceProps.value);
    const isFirstRender = useRef(true);
    const setPriceBasedOnQuantity = (): boolean => {
        if (!service || !service.priceRanges.length) return false;
        const range = service.priceRanges.find(priceRange =>
            quantity >= priceRange.fromQuantity && quantity <= priceRange.toQuantity) || service.priceRanges[0];

        setPrice(range.price);
        return true;
    }
    const setPriceBasedOnService = () => {
        if (!service) return;
        if (setPriceBasedOnQuantity()) return;
        setPrice(service.price);
    }
    const onServiceManualChange = (service: ServiceSchema) => {
        setService(service);
    }
    const onPriceManualChange = (value: number | string) => {
        if (typeof value !== 'number') return;
        setPrice(value);
    }
    useEffect(() => {
        if (isFirstRender.current && lockOnEdit) return;

        setPriceBasedOnQuantity();
    }, [quantity]);

    useEffect(() => {
        if (isFirstRender.current && lockOnEdit) return;

        if (!priceProps.onChange || typeof price === 'undefined') return;
        priceProps.onChange(price);
    }, [price]);

    useEffect(() => {
        if (!serviceProps.onChange || !service) return;
        if (price && isFirstRender.current && lockOnEdit) return;
        setPriceBasedOnService();
        serviceProps.onChange(service);
    }, [service]);
    useEffect(() => {
        isFirstRender.current = false;
    }, []);


    return (
        <Flex
            align={"center"}
            gap={rem(10)}
            {...containerProps}
        >

            {/*<ActionIcon variant={"default"}>*/}
            {/*<IconReload onClick={() => onReload()}/>*/}
            {/*</ActionIcon>*/}
            <ServiceSelectNew
                {...serviceProps}
                value={service}
                onChange={onServiceManualChange}
                filterType={filterType}
                disabled={serviceProps.value !== undefined && lockOnEdit}
            />
            <NumberInput
                {...priceProps}
                onChange={onPriceManualChange}
                // value={price}
                defaultValue={priceProps.value}
            />

        </Flex>
    )
}

export default ServiceWithPriceInput;