import * as classNames from 'classnames';
import * as React from 'react';
import BSL from '../../typings';
import variable from '../../utils/system/variable';
import Icon from '../Icon';
import styles from './style';


const svgRootPath = variable.svgRootPath;
const svgFile = {
  complete: svgRootPath + require('../../assets/success.svg').id,
  fail: svgRootPath + require('../../assets/fail.svg').id,
  loading: svgRootPath + require('../../assets/loading.svg').id
};

export interface ToastProps extends BSL.ComponentProps {
  type?: 'complete' | 'fail' | 'loading';
  children?: any;
}

const prefixCls = 'bsl-toast';
const Toast = (props: ToastProps) => {
  const { type, children, style } = props;

  return type ? (
    <div className={classNames(styles.text, styles.textIcon, `${prefixCls}-text`, `${prefixCls}-text-icon`)} style={style}>
      <Icon 
        className={classNames(styles.icon, `${prefixCls}-icon`, `${prefixCls}-icon-${type}`, {
          [styles.iconLoading]: type === 'loading'
        })}
        src={svgFile[type]}
      />
      <div className={classNames(styles.textInfo, `${prefixCls}-text-info`)} >{children}</div>
    </div>
  ) : (
    <div className={classNames(styles.text, `${prefixCls}-text`)} style={style}>
      <div className={classNames(styles.textLabel, `${prefixCls}-text-label`)} >{children}</div>
    </div>
  );
};

export default Toast;