import {ContextModalProps} from "@mantine/modals";
import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {MarketplaceSchema} from "../../../../client";
import {useForm} from "@mantine/form";
import {Fieldset, Flex, rem, TextInput} from "@mantine/core";
import BaseMarketplaceSelect from "../../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import MarketplaceAuthDataInput from "./MarketplaceAuthDataInput.tsx";

type Props = CreateEditFormProps<MarketplaceSchema>
const MarketplaceFormModal = ({
                                  context,
                                  id,
                                  innerProps
                              }: ContextModalProps<Props>) => {
    const isEditing = 'element' in innerProps;
    const initialValue: Partial<MarketplaceSchema> = isEditing ? innerProps.element : {
        authData: {
            Authorization: '',
            "Client-Id": '',
            "Api-Key": ''

        },
    };
    const form = useForm<Partial<MarketplaceSchema>>({
        initialValues: initialValue,
        validate: {
            baseMarketplace: (baseMarketplace) => !baseMarketplace && "Необходимо указать базовый маркетплейс",
            name: (name) => !name && "Необходимо указать название маркетплейса",
            authData: (authData) => !authData && "Необходимо указать данные авторизации"
        }
    });
    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")}
                            />
                            <BaseMarketplaceSelect
                                label={"Базовый маркетплейс"}
                                placeholder={"Выберите базовый маркетплейс"}
                                {...form.getInputProps("baseMarketplace")}
                            />

                            {form.values.baseMarketplace &&
                                <MarketplaceAuthDataInput
                                    baseMarketplace={form.values.baseMarketplace}
                                    value={form.values.authData as Record<string, string>}
                                    onChange={(value) => form.setFieldValue("authData", value)}
                                    error={form.getInputProps("authData").error}
                                />
                            }

                        </Flex>
                    </Fieldset>
                </>
            </BaseFormModal.Body>
        </BaseFormModal>
    )
}
export default MarketplaceFormModal;