import React, { useRef, useEffect } from 'react';
import AliAwsc from '../../components/AliAwsc/aliAwsc';

interface AliAwscProps {
  width?: string | number;
  fontSize?: string | number;
  upLang?: any;
  success: any;
  fail?: any;
  awscId?: string;
  style?: any;
  reset?: (p:any) => void;
  slideState?: boolean;
  reSetSlideStatus?: any;
}

export const AuthAliAwsc: React.FC<any> = (props: AliAwscProps) => {
  const fetchRef = useRef<any>({});
  // const [slideInfo, setSlideInfo] = useState({});
  const { success, slideState, reSetSlideStatus } = props;

  const sliderSuccess = (values: any) => {
    // setSlideInfo({
    //   ...values,
    //   sToken: values.token,
    //   scene: 'nc_message',
    // });
    success({
      sliderParam: {
        ...values,
        sToken: values.token,
        scene: 'nc_message',
      },
    });
  };

  // slideState

  useEffect(() => {
    if (slideState) {
      fetchRef.current.reset && fetchRef.current.reset();
      reSetSlideStatus();
    }
  }, [slideState])

  return (
    <AliAwsc
      width={props.width || 340}
      awscId={props.awscId || 'rpmSlider'}
      success={sliderSuccess}
      upLang={{
        cn: {
          SLIDE: '按住滑块，拖至最右端验证',
        },
      }}
      reset={(reset: any) => {
        fetchRef.current.reset = reset;
      }}
    />
  );
};