import React from 'react';
import { Descriptions, Input, Form } from 'kts-components-antd-x3';
import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
import { decorator } from 'grey-react-box';
import Invoice from '../../..';
import { IFormItem } from '../../../InvoiceController/InvoiceControllerState/BuyerState';
import './index.less';

const { TextArea } = Input;

export interface ISellerProps {

  /** 默认备注 */
  defaultsellerRemarks?: string;

  /** 表单项配置 */
  formItem?: IFormItem[];

  /** 表单渲染方法 */
  formRender?: Map<string, (e: IFormItem) => React.ReactNode>;
}

export default class Buyer extends React.Component<ISellerProps> {
  render = () => <Main {...this.props} />;
}

const Main = decorator<ISellerProps, ISellerProps & FormComponentProps>(Form.create())((props) => {

  const { form } = props;

  const { getFieldDecorator } = form;

  /** 控制器 */
  const controller = Invoice.useInvoiceController();

  /** 控制器 */
  const model = controller.useMemo(s => s.model, []);

  /** 注册 form 对象 */
  controller.useForm('seller', form);

  /** 表单项配置 */
  const formItem = React.useMemo(() => {
    if (props.formItem) {
      return props.formItem;
    } else {
      return [
        { id: 'sellerName', label: '销售方名称', node: <Input readOnly={model === 'prefab'} size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
        { id: 'sellerNo', label: '销售方纳税人识别号', node: <Input readOnly={model === 'prefab'} size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
        { id: 'sellerAddress', label: '销售方地址及电话', node: <Input readOnly={model === 'prefab'} size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
        { id: 'sellerBank', label: '销售方开户行及账号', node: <Input readOnly={model === 'prefab'} size="small" />, options: { rules: [{ required: true, message: '不能为空' }] } },
      ]
    }
  }, [props.formItem, model])

  /** 创建表单 */
  const createFormItem = React.useCallback((e: IFormItem) => {
    const render = props.formRender?.get(e.id);
    if (render) {
      return getFieldDecorator(e.id, e.options)(render(e));
    } else {
      return getFieldDecorator(e.id, e.options)(e.node);
    }
  }, [props.formRender])

  return (
    <Form>
      <div className="kts-invoice-operate-seller">
        <div className="kts-invoice-operate-seller-message">
          <div className="kts-invoice-operate-seller-title">
            <label>销售方</label>
          </div>
          <Descriptions
            className="kts-invoice-operate-seller-message-list"
            size="small"
            column={1}
            bordered
          >
            {formItem.map((e, i) => (
              <Descriptions.Item key={i} label={e.label}>
                <Form.Item>{createFormItem(e)}</Form.Item>
              </Descriptions.Item>
            ))}
          </Descriptions>
        </div>
        <div className="kts-invoice-operate-seller-remarks">
          <div className="kts-invoice-operate-seller-title">
            <label>备注</label>
          </div>
          <div className="kts-invoice-operate-seller-remarks-value">
            {getFieldDecorator('remarks', {
              initialValue: props.defaultsellerRemarks,
            })(<TextArea />)}
          </div>
        </div>
      </div>
    </Form>
  );
});