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

import TableVirtual from './ui/TableVirtual';
import Statistics from './ui/Statistics';
import AddRowButton from './ui/AddRowButton';
import BatchImportRows from './ui/BatchImportRows';
import TaxIncludedSwitch from './ui/TaxIncludedSwitch';
import DescribeSwitch from './ui/DescribeSwitch';
import Search from './ui/Search';
import TableRow from './ui/TableRow';
// import BulkMenu from './ui/default/BulkMenu';

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

import Invoice from '../../..';
import './index.less';

import useEndowCodeButton from './ui/BulkMenu/hooks/useEndowCodeButton';
import useDelRowButton from './ui/BulkMenu/hooks/useDelRowButton'; 
import useAddDiscountRowButton from './ui/BulkMenu/hooks/useAddDiscountRowButton';
import useMergeDetails from './ui/BulkMenu/hooks/useMergeDetails';
import useMergeDiscount from './ui/BulkMenu/hooks/useMergeDiscount';
import useSalesDiscount from './ui/BulkMenu/hooks/useSalesDiscount';
import useSalesGifts from './ui/BulkMenu/hooks/useSalesGifts';

export interface IGoodsListProps {
  /** 扩展部分 */
  menuExpansion?: React.ReactNode;

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

  /** 扣除额 */
  deduction?: number;

  /** 是否能添加折扣行 */
  isAddDiscount?: boolean;

  /** 是否可以切换(含税/不含税)状态 */
  isSwitchTax?: boolean;
}

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

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

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

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

  const isprefab = controller.useMemo(s => s.model === 'prefab', []);

  const dataSource = controller.useMemo(s => s.goodsListState.goodsList, [])

  const searchValue = controller.useMemo(s => s.goodsListState.searchValue, [])

  const isTaxIncluded = controller.useMemo(s => s.goodsListState.isTaxIncluded, [])

  const dataSourceSearch = React.useMemo(() => controller.getGoodsSearch(dataSource, searchValue, isTaxIncluded), [dataSource, searchValue, controller, isTaxIncluded])

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

  useDeduction(controller, props.deduction);
  useWindowClick(controller);

  /** 批量赋码 */
  const endowCodeButton = useEndowCodeButton();

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

  /** 添加折扣行 */
  const addDiscountRowButton = useAddDiscountRowButton(); 
  /** 全单合并明细 */
  const mergeDetails = useMergeDetails()

  /** 全单合并折扣 */
  const mergeDiscount = useMergeDiscount()

  /** 销售折让 */
  const salesDiscount = useSalesDiscount()

  /** 销售赠品 */
  const salesGifts = useSalesGifts()

  /** 清空自动赋码缓存 */
  React.useEffect(() => {
    controller.run(async s => { s.goodsListState.endowCode.cache = {} });
  }, [controller])

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

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

  /** props 产品最大数 更新 */
  React.useEffect(() => {
    controller.pipeline(async s => { s.goodsListState.goodMax = props.goodMax })()
  }, [controller, props.goodMax])

  /** props 是否能添加折扣行 更新 */
  React.useEffect(() => {
    controller.pipeline(async s => { s.goodsListState.isAddDiscount = props.isAddDiscount })()
  }, [controller, props.goodMax])

  /** props 是否可以切换(含税/不含税)状态 更新 */
  React.useEffect(() => {
    controller.pipeline(async s => { s.goodsListState.isSwitchTax = props.isSwitchTax })()
  }, [controller, props.isSwitchTax])

  return (
    <div className="kts-invoice-operate-goods-list" onClick={(e) => { e.stopPropagation() }} >
      <div className="kts-invoice-operate-goods-list-able">
        <div className="kts-invoice-operate-goods-list-able-list">
          {/* 添加行 */}
          <AddRowButton />
          <BatchImportRows />
          {/* 批量菜单 */}
          {/* <BulkMenu /> */}

          {/* 批量赋码 */}
          {endowCodeButton.button}

          {/* 批量删除 */}
          {delRowButton.button}
          {/* 加载折扣 */}
          {addDiscountRowButton.button}
          {/* 全单合并明细 */}
          {mergeDetails.button}

          {/* 全单合并折扣 */}
          {mergeDiscount.button}

          {/* 添加折扣行 */}
          {/* {addDiscountRowButton.drawer} */}

          {/* 销售折让 */}
          {salesDiscount.button}

          {/* 销售赠品 */}
          {salesGifts.button}

          {/* 搜索 */}
          <Search />
        </div>
        <div className="kts-invoice-operate-goods-list-able-extend">

          {/* 扩展部分 */}
          {props.menuExpansion}

          {/* 使用哪方商品描述 */}
          <DescribeSwitch />

          {/* 是否含税开关 */}
          <TaxIncludedSwitch />
        </div>
      </div>
      <div className={classnames('kts-invoice-operate-goods-list-table', { 'kts-invoice-operate-prefab': isprefab })}>
        <TableVirtual
          bordered
          size="small"
          rowKey="$index"
          pagination={false}
          scroll={{ y: 280 }}
          components={{ body: { row: TableRow } }}
          dataSource={dataSourceSearch}
          columns={useColumns(props.form)}
          rowSelection={useRowSelection()}
          onRow={record => ({
            onClick: () => {
              onRow.onClick(record);
            },
          })}
        />
      </div>
      <div>
        {/* 汇总 */}
        <Statistics />
      </div>
    </div>
  );
});