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

const { Text } = Typography;

export interface IBuyerProps {
  formItem?: IFormItem[];
}

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

const Main = decorator<IBuyerProps, IBuyerProps & FormComponentProps>(
  Form.create(),
)((props) => {
  const { form } = props;

  const { getFieldDecorator } = form;

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

  /** 组件模式 */
  const model = controller.useMemo(s => s.model, []);

  /** 自动填充 */
  const autoContainer = controller.useMemo(s => s.buyerState.autoContainer, []);

  const formItem = React.useMemo(() => {
    if (props.formItem) {
      return props.formItem;
    } else {
      return [
        { id: 'buyerName', label: '购买方名称', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
        { id: 'buyerNo', label: '购买方纳税人识别号', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
        { id: 'buyerAddress', label: '购买方地址及电话', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
        { id: 'buyerBank', label: '购买方开户行及账号', node: <Input size="small" autoComplete="off" readOnly={model === 'prefab'} />, options: { rules: [{ required: true, message: '不能为空' }] } },
      ]
    }
  }, [props.formItem, model]);

  /** 注册 form */
  controller.useForm('buyer', form);

  const getlabel = React.useCallback((e: IFormItem) => {

    if (e.options.rules) {
      if (e.options.rules.some(e => { return e.required })) {
        return (
          <>
            <Text type="danger">*</Text>
            {e.label}
          </>
        )
      } else {
        return e.label
      }
    } else {
      return e.label;
    }
  }, [])

  return (
    <Form>
      <div className="kts-invoice-operate-buyer">
        <div className="kts-invoice-operate-buyer-message">
          <div className="kts-invoice-operate-buyer-title">
            <label>购买方</label>
          </div>
          <div className="kts-invoice-operate-buyer-message-Import">
            {model !== 'prefab' && <ImportBuyerButton />}
          </div>
          <Descriptions
            className="kts-invoice-operate-buyer-message-list"
            size="small"
            column={1}
            bordered
          >
            {
              formItem.map((item, i) => {
                return (
                  <Descriptions.Item key={i} label={getlabel(item)}>
                    <Form.Item>
                      {getFieldDecorator(item.id, item.options)(
                        autoContainer
                          ? item.id === 'buyerName' ? <BuyerNameInput /> : item.node
                          : item.node
                      )}
                    </Form.Item>
                  </Descriptions.Item>
                )
              })
            }
          </Descriptions>
        </div>
        <div className="kts-invoice-operate-buyer-password">
          <div className="kts-invoice-operate-buyer-title">
            <label>密码区</label>
          </div>
          <div></div>
        </div>
      </div>
    </Form>
  );
});