import React from 'react';
import { Input, Form, Select } from '@easyv/antd';
import { connect } from 'react-redux';
import ConfirmModal from 'components/ConfirmModal';
import EasyvButton from 'components/EasyvButton';
import styles from './UserCreateModal.less';

const { Option } = Select;
const FormItem = Form.Item;

function UserCreateModal({ visible, onSubmit, onHide, spaceList }) {
  const formItemLayout = {
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 14
    },
    initialValues: {
      spaceId: spaceList.length ? spaceList[0].id : ''
    }
  };
  return (
    <ConfirmModal visible={visible} title="新建账户" onCancel={onHide} destroyOnClose>
      <Form {...formItemLayout} onFinish={onSubmit}>
        <FormItem
          label="用户名"
          name="name"
          rules={[
            { required: true, message: '请输入用户名，16位以内任意字符' },
            { max: 16, message: '超出字符长度限制' }
          ]}>
          <Input autoComplete="off" placeholder="请输入用户名" />
        </FormItem>
        <FormItem
          label="密码"
          name="password"
          rules={[
            { required: true, message: '请输入密码，6位以上任意字符' },
            { min: 6, message: '密码长度过短' }
          ]}>
          <Input type="password" placeholder="请输入密码" />
        </FormItem>
        <FormItem label="空间" name="spaceId">
          <Select placeholder="请选择" dropdownClassName={styles.selectStyle}>
            {spaceList.map((d) => {
              return (
                <Option key={d.id} value={d.id}>
                  {d.name}
                </Option>
              );
            })}
          </Select>
        </FormItem>
        <div className={styles.footer}>
          <EasyvButton style={{ marginRight: 16, width: 80 }} onClick={onHide}>
            取消
          </EasyvButton>
          <EasyvButton theme="primary" style={{ width: 80 }} htmlType="submit">
            确定
          </EasyvButton>
        </div>
      </Form>
    </ConfirmModal>
  );
}
function mapStateToProps(state) {
  return {
    spaceList: state.space.list
  };
}
export default connect(mapStateToProps, {})(UserCreateModal);
