/** @format */

import * as React from 'react';
import { Form, Input, InputNumber, Row, Col, Switch } from 'antd';
import Button from "../../../../components/button"
import Result from "../../../../components/result"
import { FormComponentProps } from 'antd/es/form';
import AccessControl from './accessControl';
import SourceToMerchant from './merchantInfo';
import ModalForm from '../../../../components/modalForm';
import MethodSelectComponent from '../../../../components/select/method';
import Filters from "../../../../components/filters"
import { useProvideApiMerchant } from '../../../../service/provideApi';

const formItemLayout = {
    labelCol: {
        span: 10,
    },
    wrapperCol: {
        sm: { span: 4 },
    },
};

export interface UpdateAPiProps {
    max_concurrent_requests: number
    request_volume_threshold: number
    sleep_window: number
    error_percent_threshold: number
    period: number
    is_on: number
    id: string,
}
interface ApiSetProps {
    config: any;
    values?: any;
    visible?: boolean;
    title?: string;
    onCancel?: () => void;
    onSubmit?: (values: UpdateAPiProps) => void;
    loading?: boolean
    type?: "insert" | "update"
}
const ApiFusing: React.FC<ApiSetProps & FormComponentProps> = props => {
    const { values, visible, loading = false, title, config, onCancel, form, onSubmit, name } = props;
    const { getFieldDecorator, validateFieldsAndScroll } = form;

    const handleSubmit = () => {
        validateFieldsAndScroll((error, valuesField) => {
            if (error) return;
            const { is_on } = valuesField
            onSubmit && onSubmit({
                ...valuesField,
                is_on: is_on ? 1 : 0,
                id: values?.id,
                provider_api_name: `${name}-${config?.thirdpart_api_name}`,
                provider_api_code: config?.provider_api_code,
            })
        })
    }

    const formColumns = React.useMemo(() => {
        const columns = [
            {
                title: `基本信息-${config?.thirdpart_api_name}`,
                child: [
                    {
                        label: '最大并发请求数',
                        Component: <InputNumber placeholder="请输入" />,
                        key: 'max_concurrent_requests',
                        initialValue: values?.max_concurrent_requests,
                        rules: [
                            {
                                required: true,
                                message: '请输入最大并发请求数!',
                            },
                        ],
                    },
                    {
                        label: '熔断探测前的调用次数',
                        Component: <InputNumber placeholder="请输入熔断探测前的调用次数" />,
                        key: 'request_volume_threshold',
                        initialValue: values?.request_volume_threshold,
                        rules: [
                            {
                                required: true,
                                message: '请输入熔断探测前的调用次数!',
                            },
                        ],
                    },
                    {
                        label: '熔断发生后的等待恢复时间(毫秒)',
                        Component: <InputNumber placeholder="请输入熔断发生后的等待恢复时间(毫秒)" />,
                        key: 'sleep_window',
                        initialValue: values?.sleep_window,

                        rules: [
                            {
                                required: true,
                                message: '请输入熔断发生后的等待恢复时间(毫秒)!',
                            },
                        ],
                    },
                    {
                        label: '失败占比',
                        Component: <InputNumber placeholder="请输入失败占比" />,
                        key: 'error_percent_threshold',
                        initialValue: values?.error_percent_threshold,

                        rules: [
                            {
                                required: true,
                                message: '请输入失败占比!',
                            },
                        ],
                    },
                    {
                        label: '熔断统计周期(秒)',
                        Component: <InputNumber placeholder="请输入熔断统计周期(秒)" />,
                        key: 'period',
                        initialValue: values?.period,

                        rules: [
                            {
                                required: true,
                                message: '请输入熔断统计周期(秒)',
                            },
                        ],
                    },
                    {
                        label: '是否启用',
                        valuePropName: 'checked',
                        Component: <Switch />,
                        initialValue: values?.is_on === 1 ? true : false,
                        key: 'is_on',
                    },
                ],
            },
        ];
        return columns;
    }, [values]);

    return (
        <ModalForm
            title={title}
            width={600}
            onCancel={onCancel}
            loading={loading}
            visible={visible}
            onOk={handleSubmit}
        >
            <Form {...formItemLayout}>
                {formColumns.map((item, index) => {
                    return (
                        <div key={index}>
                            <h3>{item.title}</h3>
                            {item.child.map((element) => {
                                const { Component, label, key, ...rest } = element;
                                return (
                                    <Form.Item label={label} key={key}>
                                        {getFieldDecorator(key, rest)(Component)}
                                    </Form.Item>
                                )
                            })}
                        </div>
                    );
                })}

            </Form>
        </ModalForm>
    );
};
export default Form.create<ApiSetProps & FormComponentProps>({ name: 'apiFusing' })(ApiFusing);
