import React from 'react';
import { Tabs } from 'antd-mobile';
import Style from './mobile.module.less';
import ByMobile from './byMobile/index';
import ByUserEntityGrant from './byUserEntityGrant';
export default function Render(props) {
    const { entity, entityId, relations, redirectToAfterConfirm, qrCodeType, claimUrl, rule, passwordRequired, enabled, } = props.data;
    const { t } = props.methods;
    if (enabled.length === 0) {
        return (<div className={Style.container}>
                {t('noMethods')}
            </div>);
    }
    const SubParts = enabled.map((ele) => {
        switch (ele) {
            case 'email': {
                return <div className={Style.container}>{t('not-implemented')}</div>;
            }
            case 'mobile': {
                return (<ByMobile passwordRequired={passwordRequired} entity={entity} entityId={entityId} relations={relations} oakPath="$userRelation-upsert-by-mobile" oakAutoUnmount={true}/>);
            }
            case 'userEntityGrant': {
                return (<ByUserEntityGrant qrCodeType={qrCodeType} entity={entity} entityId={entityId} relations={relations} claimUrl={claimUrl} rule={rule} oakPath="$userRelation-upsert-by-userEntityGrant" oakAutoUnmount={true} redirectToAfterConfirm={redirectToAfterConfirm}/>);
            }
        }
    });
    if (SubParts.length === 1) {
        return SubParts[0];
    }
    return (<Tabs className={Style.tab}>
            {enabled.map((ele, idx) => (<Tabs.Tab title={t(`methods.${ele}`)} key={`item-${idx}`}>
                    {SubParts[idx]}
                </Tabs.Tab>))}
        </Tabs>);
}