import React, { useState } from 'react';
import { View, Image, Input } from '@tarojs/components';

import {CompDefault, MetaProps} from "../data-channel";
import connect from '../connect';
const closeEyesIcon = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/input/icon-close-eyes.png';
const openEyesIcon = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/input/icon-open-eyes.png';
const passIcon = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/input/icon-pass.png';

export interface Props extends MetaProps {}

export interface State {}

const defaultValue: CompDefault<Props, State> = {
  props: {},
  state: {},
  meta: {},
}

const InputPassword: React.FC<Props> =  () => {
  const [flag, setFlag] = useState(true);
  return (
    <View className='wm-input wm-input-middle  wm-input-underline'>
      <View className='icon-box'>
        <Image className='icon preIcon' src={passIcon} />
      </View>
      <Input password={flag} placeholder='请输入密码' />
      <View className='icon-box' onClick={() => setFlag(!flag)}>
        <Image className='icon' src={flag ? closeEyesIcon : openEyesIcon} />
      </View>
    </View>
  );
};

export default connect(InputPassword, defaultValue);