/* eslint-disable react/react-in-jsx-scope */
// @ts-nocheck
import React from 'react';
import Script from 'react-load-script';

const AliScript = (props) => {
  const { awscId, data, reset } = props ?? {};
  const myLoad = () => {
    console.log('阿里图形验证加载完成');
    // eslint-disable-next-line no-undef
    AWSC.use('nc', (state, module) => {
      // 初始化
      Window.nc = module.init({
        // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
        appkey: 'FFFF0N0000000000A03B',
        // 使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
        scene: 'nc_message',
        // 声明滑动验证需要渲染的目标ID。
        renderTo: awscId,
        // 前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
        success: (data) => {
          console.log(data);
          // console.log(data.sessionId);
          // console.log(data.sig);
          // console.log(data.token);
        },
        // 滑动验证失败时触发该回调参数。
        fail: (failCode) => {
          console.log(failCode);
        },
        // 验证码加载出现异常时触发该回调参数。
        error: (errorCode) => {
          console.log(errorCode);
        },
        ...data,
      });
      reset && reset(Window.nc.reset);
    });
  };
  return (<><Script url="https://g.alicdn.com/AWSC/AWSC/awsc.js" onLoad={myLoad} /></>);
};

export default AliScript;