import React from 'react';
import { Input, Form, Button, Select } from '@alifd/next';

const FormItem = Form.Item;

const formItemLayout = {
  colSpan: 12,
};

const ROLES = [{
  label: '管理员',
  value: 'admin',
}, {
  label: '开发',
  value: 'dev',
}, {
  label: '测试',
  value: 'test',
}];

export interface IDataSource {
  name?: string;
  nick?: string;
  role?: string;
}

export interface IBasicFormProps {
  defaultValue?: IDataSource;
  onSubmit?: (value) => void;
  onCancel?: () => void;
}

const BasicForm: React.SFC<IBasicFormProps> = (props): JSX.Element => {
  const {
    defaultValue = {},
    onSubmit = () => {},
    onCancel = () => {},
  } = props;

  // const [postData, setValue] = useState<BasicFormProps>(dataSource);

  // const formChange = (values: BasicFormProps): void => {
  //   setValue(values);
  // };
  const { name, nick, role } = defaultValue;
  const handleSubmit = (value, errors) => {
    if (!errors) {
      onSubmit(value);
    }
  }

  return (
    <Form
      className="halo-basic-form"
      responsive
      fullWidth
      labelAlign="top"
      // value={postData}
      // onChange={formChange}
    >
      <FormItem {...formItemLayout} label="姓名：" required requiredMessage="必填">
        <Input placeholder="请输入用户姓名" name="name" defaultValue={name} />
      </FormItem>

      <FormItem {...formItemLayout} label="昵称：" required requiredMessage="必填">
        <Input placeholder="请输入用户昵称" name="nick" defaultValue={nick} />
      </FormItem>

      <FormItem {...formItemLayout} label="角色：" required requiredMessage="必填">
        <Select name="role" dataSource={ROLES} defaultValue={role} />
      </FormItem>

      <FormItem colSpan={12}>
        <Form.Submit
          type="primary"
          onClick={handleSubmit}
          validate
        >提交</Form.Submit>
        <Button style={{ marginLeft: 10 }} onClick={onCancel} type="secondary">取消</Button>
      </FormItem>
    </Form>
  );
};

export default BasicForm;