import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useEffect, useState } from 'react';
import { PageHeader, FormControl, Button, TextInput, Text, Textarea, Select, Flash, Link, } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { useCache, useNavigate, useToast } from '../../hooks/index.js';
import { useRunStore } from '../../state/index.js';
export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/datasources', secretsRoute = '/settings/iam/secrets', } = {}) => {
    const runStore = useRunStore();
    const { useCreateDatasource } = useCache();
    const createDatasourceMutation = useCreateDatasource();
    const navigate = useNavigate();
    const { enqueueToast } = useToast();
    const [formValues, setFormValues] = useState({
        variant: 'athena',
        database: undefined,
        outputBucket: undefined,
        name: undefined,
        description: undefined,
    });
    const [validationResult, setValidationResult] = useState({
        variant: undefined,
        database: undefined,
        outputBucket: undefined,
        name: undefined,
        description: undefined,
    });
    const valueVariantChange = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            variant: event.target.value,
        }));
    };
    const valueDatabaseChange = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            database: event.target.value,
        }));
    };
    const valueOutputBucketChange = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            outputBucket: event.target.value,
        }));
    };
    const valueNameChange = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            name: event.target.value,
        }));
    };
    const valueDescriptionChange = (event) => {
        setFormValues(prevFormValues => ({
            ...prevFormValues,
            description: event.target.value,
        }));
    };
    useEffect(() => {
        setValidationResult({
            ...validationResult,
            name: formValues.name === undefined
                ? undefined
                : formValues.name.length > 2
                    ? true
                    : false,
            description: formValues.description === undefined
                ? undefined
                : formValues.description.length > 2
                    ? true
                    : false,
            database: formValues.variant !== 'athena'
                ? true
                : formValues.database === undefined
                    ? undefined
                    : formValues.database.length > 0
                        ? true
                        : false,
            outputBucket: formValues.variant !== 'athena'
                ? true
                : formValues.outputBucket === undefined
                    ? undefined
                    : formValues.outputBucket.length > 0
                        ? true
                        : false,
        });
    }, [formValues]);
    const submitCreate = () => {
        runStore.layout().showBackdrop('Creating an datasource...');
        createDatasourceMutation.mutate({
            name: formValues.name,
            variant: formValues.variant,
            database: formValues.database ?? '',
            outputBucket: formValues.outputBucket ?? '',
            description: formValues.description,
        }, {
            onSuccess: (resp) => {
                if (resp.success) {
                    enqueueToast(resp.message, { variant: 'success' });
                    navigate(datasourcesListRoute);
                }
            },
            onSettled: () => {
                runStore.layout().hideBackdrop();
            },
        });
    };
    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secrets" }), ' ', "are available:", '  ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), '  ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), '  ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.database ||
                                    !validationResult.outputBucket ||
                                    !validationResult.name ||
                                    !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
                                    e.preventDefault();
                                    submitCreate();
                                }, children: "Create a datasource" })] }) }) })] }));
};
export default DatasourceNew;
