import React from 'react';
import classnames from 'classnames';
import { decorator } from 'grey-react-box';
import { Form } from 'kts-components-antd-x3';
import { WrappedFormUtils } from 'kts-components-antd-x3/lib/form/Form';
import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
import Invoice from '../../..';

import TableVirtual from './ui/TableVirtual';
import AddRowButton from './ui/AddRowButton';
import TableRow from './ui/TableRow';

import useColumns from './hook/useColumns';
import useOnRow from './hook/useOnRow';
import useWindowClick from './hook/useWindowClick';
import useRowSelection from './hook/useRowSelection';

import useDelRowButton from './ui/BulkMenu/hooks/useDelRowButton';

import './index.less';
import BatchImportButton from './ui/BatchImportButton';

export interface IGoodsListProps {

  /** 产品最大数 */
  goodMax?: number;

  /** 必填校验 */
  required?: boolean;

  certificateTypeList?: any[];

  vehicleTypeList?: any[];

  addressOptions: any[];
  /**
   * 地址数据字段名
   */
  fieldNames?: any;

}

export default class PassengerList extends React.Component<IGoodsListProps> {
  render() {
    return <Main {...this.props} />
  }
}

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

  const [isRequired, setRequired] = React.useState(typeof props.required === 'boolean' ? props.required : true);

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

  const goodsList = controller.useMemo(s => s.passengerListState.goodsList, []);

  /** 货物列表 */
  const dataSource = controller.useMemo(s => s.passengerListState.goodsList, [])

  /** 表格行事件 */
  const onRow = useOnRow();

  /** 批量删除 */
  const delRowButton = useDelRowButton();


  useWindowClick(controller); // 点击组件外部 保存正在编辑的货物

  /** 注册 from 对象 */
  React.useEffect(() => {
    controller.pipeline<WrappedFormUtils>(async (s, form) => { s.passengerListState = { ...s.passengerListState, form } })(props.form);
  }, [controller, props.form]);

  React.useEffect(() => {
    controller.run(async (s) => {
      s.passengerListState.addressFieldNames = props.fieldNames
    });
  }, [props.fieldNames])

  React.useEffect(() => {
    controller.run(async (s) => {
      if (props.certificateTypeList) {
        s.passengerListState.certificateTypeList = props.certificateTypeList
      }

      if (props.vehicleTypeList) {
        s.passengerListState.vehicleTypeList = props.vehicleTypeList
      }

    });
  }, [props.vehicleTypeList, props.certificateTypeList])

  React.useEffect(() => {
    controller.run(async (s) => {
      s.passengerListState.area = props.addressOptions
    });
  }, [props.addressOptions])

  // 跟新 货物
  React.useEffect(() => {
    controller.run(async (s) => {
      s.passengerListState.goodsMap = new Map();
      goodsList.forEach((e) => { s.passengerListState.goodsMap.set(e.$index, e); });
    });
  }, [controller, goodsList]);

  /** props 产品最大数 更新 */
  React.useEffect(() => {
    controller.pipeline(async s => { s.passengerListState.goodMax = props.goodMax })()
  }, [controller, props.goodMax])
  // 注册 form
  //  controller.useForm('freightInfo', form);
  return (
    <div className="kts-invoice-operate-freight">
      <div className='real-estate-info-digtal-label' >特定信息-旅客运输服务</div>
      <div className="kts-invoice-operate-goods-list-digtal" onClick={(e) => { e.stopPropagation() }} >
        <div className="kts-invoice-operate-freight-list-able">
          {/* 添加行 */}
          <AddRowButton />

          {/* 批量删除 */}
          {delRowButton.button}

          <BatchImportButton />

          <div style={{ flex: 1 }} />

        </div>
        <div className={classnames('kts-invoice-operate-goods-list-table-digtal')}>
          <TableVirtual
            size="small"
            rowKey="$index"
            pagination={false}
            scroll={{ y: 280 }}
            components={{ body: { row: TableRow } }}
            dataSource={dataSource}
            columns={useColumns(props.form, isRequired)}
            rowSelection={useRowSelection()}
            onRow={record => ({
              onClick: () => {
                onRow.onClick(record);
              },
            })}
          />
        </div>
      </div>
    </div>
  );
});