import { FC } from "react";
import { IconTrash } from "@tabler/icons-react";
import { isNumber } from "lodash";
import { Divider, Group, NumberInput, rem, Stack, Text } from "@mantine/core";
import { useDebouncedCallback } from "@mantine/hooks";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { DealServiceSchema } from "@/lib/client";
import LockCheckbox from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/LockCheckbox/LockCheckbox";

type Props = {
    value: DealServiceSchema;
    onChange: (
        dealId: number,
        serviceId: number,
        value: DealServiceSchema
    ) => void;
    onDelete: (value: DealServiceSchema) => void;
};

const DealServiceRow: FC<Props> = ({ value, onChange, onDelete }) => {
    const debouncedOnChange = useDebouncedCallback(
        async (item: DealServiceSchema) => {
            onChange(item.dealId, item.serviceId, item);
        },
        200
    );

    return (
        <Stack
            w={"100%"}
            gap={"xs"}>
            <Divider />
            <Text>{value.service.name}</Text>
            <Group>
                <ActionIconWithTip
                    onClick={() => onDelete(value)}
                    tipLabel={"Удалить услугу"}>
                    <IconTrash />
                </ActionIconWithTip>
                <NumberInput
                    flex={1}
                    suffix={" шт."}
                    onChange={quantity =>
                        isNumber(quantity) &&
                        debouncedOnChange({ ...value, quantity })
                    }
                    value={value.quantity}
                    min={1}
                    allowNegative={false}
                />
                <NumberInput
                    flex={1}
                    onChange={price =>
                        isNumber(price) &&
                        debouncedOnChange({ ...value, price })
                    }
                    suffix={"₽"}
                    value={value.price}
                    disabled={value.isFixedPrice}
                    min={1}
                    allowNegative={false}
                    rightSectionProps={{
                        style: {
                            display: "flex",
                            cursor: "pointer",
                            pointerEvents: "auto",
                            paddingRight: rem(10),
                        },
                    }}
                    rightSection={
                        <LockCheckbox
                            label={"Зафиксировать цену"}
                            variant={"default"}
                            value={value.isFixedPrice}
                            onChange={isFixedPrice =>
                                debouncedOnChange({
                                    ...value,
                                    isFixedPrice,
                                })
                            }
                        />
                    }
                />
            </Group>
        </Stack>
    );
};

export default DealServiceRow;
