import './connection.css'
import {
    useId,
    Button,
    FieldProps,
    useToastController,
    Toast,
    ToastTitle,
    ToastIntent,
    Toaster
} from "@fluentui/react-components";
import {Field, Input} from "@fluentui/react-components";
import {useNavigate} from "react-router-dom";
import {useState} from "react";
import {Dial} from "../../api";


const Connection = (props: Partial<FieldProps>) => {

    const toasterId = useId("toaster");
    const {dispatchToast} = useToastController(toasterId);
    const navigate = useNavigate();
    const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
        name: '',
        endpoint: '',
        access: '',
        key: ''
    })

    function test() {
        const val = JSON.stringify(value);
        console.log('[DEBUG] connection.test: value =', val)
        Dial<string>("/api/connection/test", value).then(res => {
            if (res.status === 200) {
                dispatchToast(
                    <Toast>
                        <ToastTitle>连接成功!</ToastTitle>
                    </Toast>,
                    {position: "top-end", intent: "success"}
                )
            }
        })
    }

    return <div className='connection-container'>
        <div className='connection-form'>
            <div className='connection-form-field'>
                <Field
                    label="name"
                    validationState="success"
                    validationMessage="This is a success message."
                    {...props}
                >
                    <Input placeholder='名称 (example: 测试S3-minio)' value={value.name} onChange={(e) => {
                        setValue({...value, name: e.target.value});
                    }}/>
                </Field>
            </div>
            <div className='connection-form-field'>
                <Field
                    label="endpoint"
                    validationState="success"
                    validationMessage="This is a success message."
                    {...props}
                >
                    <Input placeholder='地址 (example: https://ip_or_server-name:port)' value={value.endpoint}
                           onChange={(e) => {
                               setValue({...value, endpoint: e.target.value});
                           }}/>
                </Field>
            </div>
            <div className='connection-form-field'>
                <Field
                    label="secret access"
                    validationState="success"
                    validationMessage="This is a success message."
                    {...props}
                >
                    <Input placeholder='' value={value.access} onChange={(e) => {
                        setValue({...value, access: e.target.value});
                    }}/>
                </Field>
            </div>
            <div className='connection-form-field'>
                <Field
                    label="secret key"
                    validationState="success"
                    validationMessage="This is a success message."
                    {...props}
                >
                    <Input placeholder='' value={value.key} onChange={(e) => {
                        setValue({...value, key: e.target.value});
                    }}/>
                </Field>
            </div>
            <div className='connection-form-field connection-form-field-actions'>
                <Button appearance='transparent' onClick={() => test()}>测试连接</Button>
                <div style={{marginLeft: 'auto'}}>
                    <Button style={{marginRight: '20px'}} className='connection-form-field-actions-cancel'
                            onClick={() => {
                                navigate("/")
                            }}>取消</Button>
                    <Button className='connection-form-field-actions-confirm' appearance='primary'>新建</Button>
                </div>
            </div>
        </div>
        <Toaster toasterId={toasterId}/>
    </div>
}

export default Connection;