import React, { useState, useEffect } from 'react';
import { Button, Input, Popconfirm } from 'antd';
import styles from './index.less';
import { createSecretKey, getSecretKey } from '@/services/system/secretKey';

const { TextArea } = Input;

const SecretKey: React.FC = () => {
  const [secretKey, setSecretKey] = useState('');

  const create = async () => {
    const data = await createSecretKey({});
    setSecretKey(data + '');
  };

  const getUserSecretKey = async () => {
    const data = await getSecretKey();
    setSecretKey(data + '');
  };

  useEffect(() => {
    getUserSecretKey();
  }, []);

  return (
    <div className={styles.container}>
      <Popconfirm title="确定创建密钥?" onConfirm={create} okText="确定" cancelText="取消">
        <Button className={styles.button} type="primary">
          创建密钥
        </Button>
      </Popconfirm>

      <TextArea className={styles.textarea} rows={16} value={secretKey} />
    </div>
  );
};

export default SecretKey;
