import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {PayRateSchemaBase} from "../../../../client";
import {ContextModalProps} from "@mantine/modals";
import {useForm} from "@mantine/form";
import {Fieldset, Flex, NumberInput, rem, TextInput} from "@mantine/core";
import PayrollSchemeSelect from "../../../../components/Selects/PayrollSchemeSelect/PayrollSchemeSelect.tsx";
import {PaySchemeType} from "../../../../shared/enums/PaySchemeType.ts";

type Props = CreateEditFormProps<PayRateSchemaBase>

const PayRateFormModal = ({
                              context,
                              id,
                              innerProps
                          }: ContextModalProps<Props>) => {
    const isEditing = 'element' in innerProps;
    const initialValue: Partial<PayRateSchemaBase> = isEditing ? innerProps.element : {};

    const form = useForm<Partial<PayRateSchemaBase>>({
        initialValues: initialValue,
        validate: {
            name: (name) => !name && "Необходимо указать название тарифа",
            payrollScheme: (scheme) => !scheme && "Необходимо выбрать систему оплаты",
            baseRate: (baseRate) => !baseRate && "Небходимо указать базовую ставку"
        }
    });
    return (
        <BaseFormModal
            form={form}
            closeOnSubmit
            onClose={() => context.closeContextModal(id)}
            {...innerProps}
        >
            <BaseFormModal.Body>
                <>
                    <Fieldset legend={"Общие параметры"}>
                        <Flex direction={"column"} gap={rem(10)}>

                            <TextInput
                                label={"Название"}
                                placeholder={"Введите название тарифа"}
                                {...form.getInputProps("name")}
                            />
                            <PayrollSchemeSelect
                                label={"Система оплаты"}
                                placeholder={"Выберите систему оплаты"}
                                {...form.getInputProps("payrollScheme")}
                            />
                        </Flex>

                    </Fieldset>
                    <Fieldset>
                        <Flex direction={"column"} gap={rem(10)}>

                            <NumberInput
                                allowNegative={false}
                                hideControls
                                decimalScale={2}
                                label={"Базовая ставка"}
                                placeholder={"Выберите базовую ставку"}
                                thousandSeparator={" "}
                                suffix={"₽"}
                                {...form.getInputProps("baseRate")}

                            />
                            {form.values.payrollScheme?.key === PaySchemeType.HOURLY &&
                                <>
                                    <NumberInput
                                        allowNegative={false}
                                        hideControls
                                        allowDecimal={false}
                                        label={"Порог сверхурочных"}
                                        placeholder={"Введите порог сверхурочных"}
                                        {...form.getInputProps("overtimeThreshold")}
                                    />
                                    <NumberInput
                                        allowNegative={false}
                                        hideControls
                                        decimalScale={2}
                                        label={"Сверхурочная ставка"}
                                        placeholder={"Выберите сверхурочную ставку"}
                                        thousandSeparator={" "}
                                        suffix={"₽"}
                                        {...form.getInputProps("overtimeRate")}
                                    />

                                </>
                            }
                        </Flex>

                    </Fieldset>
                </>
            </BaseFormModal.Body>
        </BaseFormModal>
    )
}

export default PayRateFormModal;