import { FC } from "react";
import { IconTrash } from "@tabler/icons-react";
import { isNumber } from "lodash";
import { Flex, Input, NumberInput, rem } from "@mantine/core";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
import { ServicePriceRangeSchema } from "@/lib/client";
import BaseFormInputProps from "@/utils/baseFormInputProps";

export type PriceRangeInputType = BaseFormInputProps<ServicePriceRangeSchema[]>;

const RangePriceInput: FC<PriceRangeInputType> = props => {
    const onAddRange = () => {
        const newRange = {
            fromQuantity: 0,
            toQuantity: 0,
            price: 0,
            id: null,
        };
        props.onChange([...props.value, newRange]);
    };

    const onDeleteRange = (idx: number) => {
        const newRanges = props.value.filter((_, i) => i !== idx);
        props.onChange(newRanges);
    };

    const onChangeRange = (
        idx: number,
        values: Partial<ServicePriceRangeSchema>
    ) => {
        const newRanges = props.value.map((item, i) =>
            i === idx
                ? {
                      ...item,
                      ...values,
                  }
                : item
        );
        props.onChange(newRanges);
    };

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

                <InlineButton onClick={onAddRange}>
                    Добавить диапазон
                </InlineButton>
            </Flex>
        </Input.Wrapper>
    );
};
export default RangePriceInput;
