import React from 'react';
import { Button, Space, Switch, Table, Tooltip, Modal, Select, } from 'antd';
import Styles from './web.pc.module.less';
import { CheckOutlined, CloseOutlined, ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;
export default function render(props) {
    const { data, methods } = props;
    const { oakFullpath, oakDirty, oakExecuting, applicationPassports, systemId, applications, passports, types, apArray, } = data;
    const { clean, execute, t, onCheckedChange, updateItem, checkLastOne, onSelectChange } = methods;
    if (!(applications && applications.length > 0)) {
        return (<div>请先前往应用管理创建application</div>);
    }
    if (!(passports && passports.length > 0)) {
        return (<div>请先完成登录配置，启用登录方式</div>);
    }
    let columns = [
        {
            title: '',
            key: 'applicationName',
            dataIndex: 'aName',
            fixed: 'left',
            width: 100,
        },
    ];
    const showConfirm = (aId, pId, apId) => {
        confirm({
            title: '当前application将无登录方式',
            icon: <ExclamationCircleFilled />,
            content: '关闭后，当前applicaion将无登录方式，可能影响用户登录',
            onOk() {
                onCheckedChange(aId, pId, false, apId);
            },
            onCancel() {
            },
        });
    };
    if (types && types.length > 0) {
        for (const type of types) {
            columns.push({
                title: t(`passport:v.type.${type}`),
                dataIndex: 'typeRecords',
                key: `${type} `,
                align: 'center',
                width: 120,
                render: (_, { typeRecords, aId }) => <Space direction="vertical">
                        {typeRecords[type].render === 'select' ? (<Tooltip title={typeRecords[type].disabled ? typeRecords[type].disabledTip : ''}>
                                <Select allowClear value={typeRecords[type].checkedValue} onChange={(value, option) => {
                            onSelectChange(aId, value, typeRecords[type].apId);
                        }} onClear={() => {
                            if (checkLastOne(aId, typeRecords[type].pId)) {
                                showConfirm(aId, typeRecords[type].pId, typeRecords[type].apId);
                            }
                            else {
                                onSelectChange(aId, undefined, typeRecords[type].apId);
                            }
                        }} disabled={typeRecords[type].disabled} options={typeRecords[type].passportOptions} optionRender={(option) => (<Tooltip title={(option.data.disabled) ? option.data.disabledTip : ''}>
                                            <div>{option.data.label}</div>
                                        </Tooltip>)} style={{ width: 140 }}/>
                            </Tooltip>) : (<>
                                <Tooltip title={typeRecords[type].disabled ? typeRecords[type].disabledTip : ''}>
                                    <Space>
                                        <div>启用:</div>
                                        <Switch disabled={typeRecords[type].disabled} checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} checked={!!typeRecords[type].checked} onChange={(checked) => {
                            if (!checked && checkLastOne(aId, typeRecords[type].pId)) {
                                showConfirm(aId, typeRecords[type].pId, typeRecords[type].apId);
                            }
                            else {
                                onCheckedChange(aId, typeRecords[type].pId, checked, typeRecords[type].apId);
                            }
                        }}/>
                                    </Space>
                                </Tooltip>
                                {typeRecords[type].showPwd &&
                            <Space>
                                        <div>允许密码登录:</div>
                                        <Tooltip title={typeRecords[type].pwdDisabled ? typeRecords[type].pwdDisabledTip : ''}>
                                            <Switch size="small" disabled={typeRecords[type].pwdDisabled} checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} checked={!!typeRecords[type].allowPwd} onChange={(checked) => {
                                    methods.updateItem({
                                        allowPwd: checked
                                    }, typeRecords[type].apId);
                                }}/>
                                        </Tooltip>
                                    </Space>}
                            </>)}

                    </Space>
            });
        }
        columns.push({
            title: '默认登录方式',
            key: 'default',
            dataIndex: 'defaultValue',
            fixed: 'right',
            width: 140,
            render: (_, { defaultOptions, defaultValue, aId }) => <>
                    <Select value={defaultValue} style={{ width: 120 }} onChange={(value) => { updateItem({ isDefault: true, }, value); }} options={defaultOptions}/>
                </>
        });
    }
    return (<>
            <div className={Styles.btns}>
                <Button disabled={!oakDirty} type="primary" danger onClick={() => clean()} style={{
            marginRight: 10,
        }}>
                    重置
                </Button>
                <Button disabled={!oakDirty} type="primary" onClick={async () => {
            await execute();
        }}>
                    确定
                </Button>
            </div>
            <Table columns={columns} dataSource={apArray} pagination={false} scroll={{ x: 1200 }} rowKey="aId"/>
        </>);
}