import {BaseFormInputProps} from "../../../../types/utils.ts";
import {ServicePriceRangeSchema} from "../../../../client";
import {FC, useEffect, useState} from "react";
import {ActionIcon, Button, Flex, Input, NumberInput, rem} from "@mantine/core";
import {IconTrash} from "@tabler/icons-react";
import {isNumber} from "lodash";

export type PriceRangeInputType = BaseFormInputProps<ServicePriceRangeSchema[]>;

const RangePriceInput: FC<PriceRangeInputType> = (props: PriceRangeInputType) => {
    const {value} = props;
    const [innerValue, setInnerValue] = useState<ServicePriceRangeSchema[]>(props.value || []);
    const onAddRange = () => {
        const newRange = {
            fromQuantity: 0,
            toQuantity: 0,
            price: 0,
            id: null
        }
        setInnerValue([...innerValue, newRange]);
        props.onChange([...innerValue, newRange]);
    }
    const onDeleteRange = (idx: number) => {
        const newRanges = innerValue.filter((_, i) => i !== idx);
        setInnerValue(newRanges);
        props.onChange(newRanges);
    }
    const onFromQuantityChange = (idx: number, value: number) => {
        const newRanges = innerValue.map((item, i) => i === idx ? {
            ...item,
            fromQuantity: value
        } : item);
        setInnerValue(newRanges);
        props.onChange(newRanges);
    }
    const onToQuantityChange = (idx: number, value: number) => {
        const newRanges = innerValue.map((item, i) => i === idx ? {
            ...item,
            toQuantity: value
        } : item);
        setInnerValue(newRanges);
        props.onChange(newRanges);
    }
    const onPriceChange = (idx: number, value: number) => {
        const newRanges = innerValue.map((item, i) => i === idx ? {
            ...item,
            price: value
        } : item);
        setInnerValue(newRanges);
        props.onChange(newRanges);
    }
    useEffect(() => {
        if (props.value === innerValue) return;
        setInnerValue(props.value || []);
    }, [value]);

    return (
        <Input.Wrapper error={props.error} label={"Диапазон цен"}>
            <Flex direction={"column"} gap={rem(10)}>
                {innerValue.map((range, idx) => (
                    <Flex
                        key={idx}
                        gap={rem(10)}
                        align={"flex-end"}
                    >
                        <ActionIcon onClick={() => onDeleteRange(idx)} variant={"default"}>
                            <IconTrash/>
                        </ActionIcon>
                        <NumberInput
                            label={"От количества"}
                            placeholder={"От"}
                            hideControls
                            value={range.fromQuantity}
                            onChange={event => (event && isNumber(event)) && onFromQuantityChange(idx, event)}
                        />
                        <NumberInput
                            label={"До количества"}
                            placeholder={"До"}
                            hideControls
                            value={range.toQuantity}
                            onChange={event => (event && isNumber(event)) && onToQuantityChange(idx, event)}
                        />
                        <NumberInput
                            label={"Цена"}
                            placeholder={"Цена"}
                            hideControls
                            value={range.price}
                            onChange={event => (event && isNumber(event)) && onPriceChange(idx, event)}
                        />

                    </Flex>
                ))}

                <Button onClick={onAddRange}>Добавить диапазон</Button>
            </Flex>
        </Input.Wrapper>

    )
}
export default RangePriceInput