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 Statistics from './ui/Statistics';
import AddRowButton from './ui/AddRowButton';
import BatchImportRows from './ui/BatchImportRows';
import TaxIncludedSwitch from './ui/TaxIncludedSwitch';
import Search from './ui/Search';
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 useAddDiscountRowButton from './ui/BulkMenu/hooks/useAddDiscountRowButton';
import useEndowCodeButton from './ui/BulkMenu/hooks/useEndowCodeButton';
import useEmptyRefill from './ui/BulkMenu/hooks/useEmptyRefill';
import useReselectInvoiceType from './ui/BulkMenu/hooks/useReselectInvoiceType';

import './index.less';

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 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();

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

  /** 添加折扣行 */
  const addDiscountRowButton = useAddDiscountRowButton();

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

  /** 重选发票类型 */
  const reselectInvoiceType = useReselectInvoiceType();

  /** 清空重填 */
  const emptyRefill = useEmptyRefill();

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

  /** 清空自动赋码缓存 */
  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-digtal" onClick={(e) => { e.stopPropagation() }} >
      <div className="kts-invoice-operate-goods-list-able">
        {/* 添加行 */}
        <AddRowButton />

        <BatchImportRows />

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

        {/* 加载折扣 */}
        {addDiscountRowButton.button}

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

        {/* 是否含税开关 */}
        <TaxIncludedSwitch />

        {/* 搜索 */}
        <Search />

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

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

        {/* 重选发票类型 */}
        {reselectInvoiceType.button}

        {/* 清空重填 */}
        {emptyRefill.button}
      </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={dataSourceSearch}
          columns={useColumns(props.form)}
          rowSelection={useRowSelection()}
          onRow={record => ({
            onClick: () => {
              onRow.onClick(record);
            },
          })}
        />
      </div>
      <div>
        {/* 汇总 */}
        <Statistics />
      </div>
    </div>
  );
});