import React, { useState } from 'react';
import { Input, Button } from '@easyv/antd';
import { useTitle } from 'components/easyUse';
import styles from './style.less';

interface Props {
  handleSumitPassword: (e: string) => void;
}

const SharePasswordPage = (props: Props) => {
  const [password, setPassword] = useState('');

  useTitle('已打开密码保护，请输入密码');
  const { handleSumitPassword } = props;
  return (
    <div className={styles.container}>
      <p style={{ marginBottom: 8 }}>已打开密码保护，请输入密码</p>
      <div>
        <Input
          style={{ width: 250, marginRight: 16 }}
          onChange={(e) => setPassword(e.target.value)}
          type="password"
          onKeyDown={(event) => {
            const { key } = event;
            if (key !== undefined && key === 'Enter') {
              handleSumitPassword(password);
            }
          }}
        />
        <Button type="primary" onClick={() => handleSumitPassword(password)}>
          确定
        </Button>
      </div>
    </div>
  );
};

export default SharePasswordPage;
