import React, { useEffect, useState } from "react";
import { EmailConfig, MfwConfig, PfwConfig, SmsConfig } from "../../../entities/Passport";
import { EntityDict } from "../../../oak-app-domain";
import { Switch, Form, Input, Select, Space, Tag } from 'antd';
import Styles from './web.module.less';

export default function Sms(props: {
    passport: EntityDict['passport']['OpSchema'] & { stateColor: string };
    t: (k: string, params?: any) => string;
    changeEnabled: (enabled: boolean) => void;
    updateConfig: (id: string, config: SmsConfig | EmailConfig | PfwConfig | MfwConfig, path: string, value: any, type?: string) => void;
}) {
    const { passport, t, changeEnabled, updateConfig } = props;
    const { id, type, enabled, stateColor } = passport;
    const config = passport.config as SmsConfig || {};
    const [templateName, setTemplateName] = useState(config?.templateName || '');
    const [smsCodeDuration, setSmsCodeDuration] = useState(config?.codeDuration || '');
    const [smsDigit, setSmsDigit] = useState(config?.digit || '');

    useEffect(() => {
        setTemplateName(config?.templateName || '');
        setSmsCodeDuration(config?.codeDuration || '');
        setSmsDigit(config?.digit || '');
    }, [config]);

    return (
        <div className={Styles.item}>
            <div className={Styles.title}>
                <Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
                <Switch
                    checkedChildren="开启"
                    unCheckedChildren="关闭"
                    checked={enabled}
                    onChange={(checked) => {
                        changeEnabled(checked)
                    }}
                />
            </div>
            {enabled &&
                <div>
                    <Form
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 20 }}
                        style={{ maxWidth: 900, marginTop: 16 }}
                    >
                        <Form.Item
                            label="模拟发送"
                            tooltip="开启模拟发送短信，发短信不会调用api"
                        >
                            <Switch
                                checkedChildren="是"
                                unCheckedChildren="否"
                                checked={(config as SmsConfig)?.mockSend}
                                onChange={(checked) => {
                                    updateConfig(id, config!, 'mockSend', checked, 'sms');
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                            label="默认渠道"
                            tooltip="发送短信渠道，如阿里云、腾讯云、天翼云"
                        >
                            <>
                                <Select
                                    placeholder="请选择渠道"
                                    value={(config as SmsConfig)?.defaultOrigin}
                                    style={{ width: 120 }}
                                    onChange={(value) => {
                                        updateConfig(id, config!, 'defaultOrigin', value, 'sms');
                                    }}
                                    options={[
                                        { value: 'ali', label: '阿里云' },
                                        { value: 'tencent', label: '腾讯云' },
                                        { value: 'ctyun', label: '天翼云' },
                                    ]}
                                />
                            </>
                        </Form.Item>
                        <Form.Item label="验证码模版名" tooltip="短信验证码模版名">
                            <Input
                                placeholder="请输入验证码模版名"
                                type="text"
                                value={templateName}
                                onChange={(e) => {
                                    setTemplateName(e.target.value);
                                }}
                                onBlur={() => {
                                    if (templateName !== (config as SmsConfig)?.templateName) {
                                        updateConfig(id, config!, 'templateName', templateName, 'sms');
                                    }
                                }}
                            />
                        </Form.Item>
                        <Form.Item
                            label="验证码有效时间"
                            tooltip="短信验证码发送有效时间，不填为1分钟"
                        >
                            <Input
                                placeholder="请输入验证码有效时间"
                                type="number"
                                value={smsCodeDuration}
                                min={0}
                                onChange={(e) => {
                                    const val = e.target.value;
                                    if (val) {
                                        setSmsCodeDuration(Number(val));
                                    } else {
                                        setSmsCodeDuration('');
                                    }
                                }}
                                onBlur={() => {
                                    if (Number(smsCodeDuration) > 0) {
                                        updateConfig(id, config!, 'codeDuration', smsCodeDuration, 'sms');
                                    } else {
                                        updateConfig(id, config!, 'codeDuration', undefined, 'sms');
                                    }
                                }}
                                suffix="分钟"
                            />
                        </Form.Item>
                        <Form.Item
                            label="验证码位数"
                            tooltip="短信验证码位数，可设置4~8位"
                        >
                            <Input
                                placeholder="请输入验证码有效位数"
                                type="number"
                                value={smsDigit}
                                min={4}
                                max={8}
                                onChange={(e) => {
                                    const val = e.target.value;
                                    if (val) {
                                        setSmsDigit(Number(val));
                                    } else {
                                        setSmsDigit('');
                                    }
                                }}
                                onBlur={() => {
                                    if (Number(smsDigit) > 0) {
                                        updateConfig(id, config!, 'digit', smsDigit, 'sms');
                                    } else {
                                        updateConfig(id, config!, 'digit', undefined, 'sms');
                                    }
                                }}
                            />
                        </Form.Item>
                    </Form>
                </div>
            }
        </div>
    )
}