import { CSSProperties } from 'react';
import AliScript from './aliScript';
import { AwscViewStyle } from './styles';

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

const AliAwsc = (props: AliAwscProps) => {
  const { width = 300, fontSize, upLang, success, fail, awscId, reset, style = {} } = props;
  const resetAction = (aliReset: any) => {
    reset && reset(aliReset);
  };
  // eslint-disable-next-line react/jsx-wrap-multilines
  return <AwscViewStyle style={{ width, ...style }}>
    <div id={awscId} />
    <AliScript awscId={awscId} data={{ width, fontSize, upLang, fail, success }} reset={resetAction} />
  </AwscViewStyle>;
};

export default AliAwsc;