import React from 'react';
import { Form, Input, Switch, Select, Typography } from 'antd';
import Styles from './styles.module.less';
const { Text } = Typography;
const Upsert = (props) => {
    const { item } = props.data;
    const { t, update } = props.methods;
    if (item === undefined) {
        return <div>{t('noData')}</div>;
    }
    return (<div className={Styles.id}>
            <Form layout="vertical" autoComplete="off">
                <Form.Item label={t('name')} rules={[{ required: true, message: t('nameRequired') }]}>
                    <Input placeholder={t('namePlaceholder')} value={item.name || ""} onChange={(v) => {
            update({ name: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('type')} rules={[{ required: true, message: t('typeRequired') }]} extra={item.type && item.type !== 'oak' && item.type !== 'gitea' ? (<Text type="warning">
                                「{item.type}」不是预设类型，请自行注入 handler。
                            </Text>) : undefined}>
                    <Select mode="tags" placeholder={t('typePlaceholder')} value={item.type ? [item.type] : []} // 保持数组形式
     onChange={(v) => {
            // 只取最后一个输入或选择的值
            const last = v.slice(-1)[0];
            update({ type: last });
        }} tokenSeparators={[',']} maxTagCount={1} // 只显示一个标签
     options={[
            { value: 'oak', label: 'Oak' },
            { value: 'gitea', label: 'Gitea' },
        ]}/>
                </Form.Item>

                <Form.Item label={t('logo')}>
                    <Input placeholder={t('logoPlaceholder')} value={item.logo || ""} onChange={(v) => {
            update({ logo: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('authorizationEndpoint')} rules={[{ required: true, message: t('authorizationEndpointRequired') }]}>
                    <Input placeholder={t('authorizationEndpointPlaceholder')} value={item.authorizationEndpoint || ""} onChange={(v) => {
            update({ authorizationEndpoint: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('tokenEndpoint')} rules={[{ required: true, message: t('tokenEndpointRequired') }]}>
                    <Input placeholder={t('tokenEndpointPlaceholder')} value={item.tokenEndpoint || ""} onChange={(v) => {
            update({ tokenEndpoint: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('refreshEndpoint')}>
                    <Input placeholder={t('refreshEndpointPlaceholder')} value={item.refreshEndpoint || ""} onChange={(v) => {
            update({ refreshEndpoint: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('userInfoEndpoint')}>
                    <Input placeholder={t('userInfoEndpointPlaceholder')} value={item.userInfoEndpoint || ""} onChange={(v) => {
            update({ userInfoEndpoint: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('revokeEndpoint')}>
                    <Input placeholder={t('revokeEndpointPlaceholder')} value={item.revokeEndpoint || ""} onChange={(v) => {
            update({ revokeEndpoint: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('clientId')} rules={[{ required: true, message: t('clientIdRequired') }]}>
                    <Input placeholder={t('clientIdPlaceholder')} value={item.clientId || ""} onChange={(v) => {
            update({ clientId: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('clientSecret')} rules={[{ required: true, message: t('clientSecretRequired') }]}>
                    <Input.Password placeholder={t('clientSecretPlaceholder')} value={item.clientSecret || ""} onChange={(v) => {
            update({ clientSecret: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('scopes')}>
                    <Select mode="tags" placeholder={t('scopesPlaceholder')} value={item.scopes || []} onChange={(v) => {
            update({ scopes: v });
        }} tokenSeparators={[',']} open={false}/>
                </Form.Item>

                <Form.Item label={t('redirectUri')} rules={[{ required: true, message: t('redirectUriRequired') }]}>
                    <Input placeholder={t('redirectUriPlaceholder')} value={item.redirectUri || ""} onChange={(v) => {
            update({ redirectUri: v.target.value });
        }}/>
                </Form.Item>

                <Form.Item label={t('autoRegister')} valuePropName="checked">
                    <Switch checked={!!item.autoRegister} onChange={(checked) => update({ autoRegister: checked })}/>
                </Form.Item>

                <Form.Item label={t('ableState')} valuePropName="checked">
                    <Switch checked={!!item.ableState} onChange={(checked) => update({ ableState: checked ? "enabled" : "disabled" })}/>
                </Form.Item>

                {/* <Form.Item>
            <Space>
                <Button type="primary" htmlType="submit">
                    {t('confirm')}
                </Button>
                <Button onClick={handleCancel}>
                    {t('cancel')}
                </Button>
            </Space>
        </Form.Item> */}
            </Form>
        </div>);
};
export default Upsert;