import React, { useState } from 'react';
import { Button } from '@easyv/antd';
import { login } from 'models/interaction';
import img from '../../../images/logo.png';
import style from './PasswordCheck.less';

export function PasswordCheck({ appId, onLogin }) {
  const [password, setPassword] = useState('');
  const _onLogin = () => password && login({ id: appId, password }).then(() => onLogin(password));
  return (
    <div className={style.container}>
      <div style={{ flexGrow: 1 }}>
        <img className={style.logo} src={img} />
        <div className={style.desc}>请输入大屏幕上的控制码</div>
        <form action="javascript:return true" onSubmit={_onLogin}>
          <input className={style.input} type="text" value={password} onChange={(e) => setPassword(e.target.value)} />
        </form>
      </div>
      <div className={style.submit}>
        <Button style={{ width: '100%' }} type="primary" size="large" onClick={_onLogin}>
          确认
        </Button>
      </div>
    </div>
  );
}
