import React, { useEffect, useState } from "react";
import { Switch, Form, Select, Tag, Tooltip, } from 'antd';
import Styles from './web.module.less';
export default function Oauth(props) {
    const { passport, t, changeEnabled, updateConfig, oauthOptions } = props;
    const { id, type, enabled, stateColor } = passport;
    const config = passport.config || {};
    const [oauthIds, setOauthIds] = useState(config?.oauthIds);
    useEffect(() => {
        setOauthIds(config?.oauthIds || []);
    }, [config]);
    return (<div className={Styles.item}>
            <div className={Styles.title}>
                <Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
                <Tooltip title={(oauthOptions && oauthOptions?.length > 0) ? '' : '请先启用oauth供应商'}>
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
            changeEnabled(checked);
        }} disabled={!(oauthOptions && oauthOptions?.length > 0)}/>
                </Tooltip>
            </div>
            {enabled &&
            <div>
                    <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
                        <Form.Item label='oauth供应商'>
                            <Select mode="multiple" style={{ width: '100%' }} placeholder="请选择oauth供应商" value={oauthIds} onChange={(value) => {
                    updateConfig(id, config, 'oauthIds', value, 'oauth');
                }} options={oauthOptions}/>
                        </Form.Item>
                    </Form>
                </div>}
        </div>);
}