import * as React from 'react';
import classnames from 'classnames';
import { Form, Grid, Field } from '@alife/cn-ui';
import { FormProps } from 'src/types/op-form';
import Item from './item';

import './index.scss';
import OPButton from '../op-button';

const { Row, Col } = Grid;

export default function OPForm(props: FormProps) {
  const {
    className = '',
    formItemLayout = {},
    configs = [],
    columnNumber = 1,
    field,
    searchProps,
  } = props;
  const newField = Field.useField();
  const innerField = field || newField;

  const avgSpan = 24 / columnNumber;

  const renderSearchButtons = () => {
    const {
      isRightButton = true,
      buttons,
      onSearch,
      onClear,
      searchText = '查询',
      clearText = '重置',
      span,
    } = searchProps || {};

    const getSpanNumber = (_span: string | number | undefined) =>
      _span != null ? Number(_span) : avgSpan;

    const allSpans = configs?.reduce(
      (res, curr) => res + getSpanNumber(curr.span),
      0,
    );

    const whiteSpan = 24 - (allSpans % 24) - getSpanNumber(span);

    return (
      <>
        {isRightButton && <Col span={whiteSpan} />}
        <Col
          span={span || avgSpan}
          style={{ paddingLeft: 8, paddingRight: 8 }} // gutter/2
        >
          <Form.Item
            className='op-form-item'
            labelAlign={formItemLayout.labelAlign}
            labelTextAlign={formItemLayout.labelTextAlign}
            labelCol={formItemLayout.labelCol}
            wrapperCol={formItemLayout.wrapperCol}
            colon={formItemLayout.colon}
            label={<div />}
          >
            {Array.isArray(buttons) ? (
              buttons
            ) : (
              <>
                <OPButton
                  type='primary'
                  size='small'
                  onClick={() => {
                    onSearch?.(innerField, innerField.getValues());
                  }}
                >
                  {searchText}
                </OPButton>
                <OPButton
                  type='normal'
                  size='small'
                  onClick={() => {
                    onClear?.(innerField, innerField.getValues());
                    innerField.reset();
                  }}
                >
                  {clearText}
                </OPButton>
              </>
            )}
          </Form.Item>
        </Col>
      </>
    );
  };

  return (
    <div className={classnames('op-form', className)}>
      {configs?.length ? (
        <Form size='small' fullWidth field={innerField} {...formItemLayout}>
          <Row
            wrap
            gutter={16}
            // style={{ marginLeft: 0, marginRight: 0 }}
          >
            {configs.map((item) => {
              return (
                <Col span={item.span || avgSpan}>
                  <Form.Item
                    className='op-form-item'
                    labelAlign={formItemLayout.labelAlign}
                    labelTextAlign={formItemLayout.labelTextAlign}
                    labelCol={formItemLayout.labelCol}
                    wrapperCol={formItemLayout.wrapperCol}
                    colon={formItemLayout.colon}
                    {...item}
                    {...item.decoratorProps}
                  >
                    <Item {...item} {...item.componentProps} />
                  </Form.Item>
                </Col>
              );
            })}
            {searchProps && renderSearchButtons()}
          </Row>
        </Form>
      ) : null}
    </div>
  );
}