import './index.less';
import React from 'react';
import InvoiceController from './InvoiceController';
import useToGenerateId from './tools/useToGenerateId';
import idGenerator from './tools/idGenerator';
import * as calculator from './tools/calculate';
import * as utils from './tools/utils';

import InvoiceHeader from './ui/default/InvoiceHeader';
import GoodsList from './ui/default/GoodsList';
import Seller from './ui/default/Seller';
import Buyer from './ui/default/Buyer';
import Sign from './ui/default/Sign';

import InvoiceHeaderDigtal from './ui/digtal/InvoiceHeader';
import Stakeholder from './ui/digtal/Stakeholder';
import SignDigtal from './ui/digtal/Sign';
import GoodsListDigtal from './ui/digtal/GoodsList';
import RealEstateInfo from './ui/digtal/RealEstateInfo';

import ImportBuyerDrawer from './ui/default/ImportBuyerDrawer';
import ImportGoodsDrawer from './ui/default/ImportGoodsDrawer';
import EndowCodeDrawer from './ui/default/EndowCodeDrawer';
import AddComparisonDrawer from './ui/default/AddComparisonDrawer';

/** 发票组件的上下文 */
export const InvoiceContext = React.createContext<InvoiceController>(
  undefined as any,
);

export interface IInvoiceProps {
  /** 发票数据控制器 */
  controller?: InvoiceController;

  /** 发票头UI */
  invoiceHeader?: React.ReactNode;

  /** 货物列表UI */
  goodsList?: React.ReactNode;

  /** 购买方UI （invoiceType为default时生效） */
  buyer?: React.ReactNode;

  /** 销售方UI （invoiceType为default时生效）*/
  seller?: React.ReactNode;

  /** 干系人（购买方&销售方） （invoiceType为digtal时生效） */
  stakeholder?: React.ReactNode;

  /** 落款UI */
  sign?: React.ReactNode;

  /** 特殊信息 */
  specialInfor?: React.ReactNode;

  /** 底部扩展UI */
  footExpand?: React.ReactNode;

  /** 发票种类： default-默认，digtal-数电 */
  invoiceType?: 'default' | 'digtal';
}

export default class Invoice extends React.PureComponent<IInvoiceProps> {
  /** 控制器 */
  static readonly InvoiceController = InvoiceController;

  /** 发票头(默认) */
  static readonly InvoiceHeader = InvoiceHeader;

  /** 货物列表(默认) */
  static readonly GoodsList = GoodsList;

  /** 销售方(默认) */
  static readonly Seller = Seller;

  /** 落款(默认) */
  static readonly Sign = Sign;

  /** 购买方(默认) */
  static readonly Buyer = Buyer;

  /** 发票头(数电) */
  static readonly InvoiceHeaderDigtal = InvoiceHeaderDigtal;

  /** 干系人(数电) */
  static readonly Stakeholder = Stakeholder;

  /** 落款(数电) */
  static readonly SignDigtal = SignDigtal;

  /** 特殊信息-不动产经营租赁服务(数电) */
  static readonly RealEstateInfo = RealEstateInfo;

  /** 货物列表(数电) */
  static readonly GoodsListDigtal = GoodsListDigtal;

  /** 货物索引生成器 */
  static idGenerator = idGenerator;

  /** 金额计算方法 */
  static calculator = calculator;

  /** 工具方法 */
  static utils = utils;

  /** 获取控制器钩子 */
  static useInvoiceController = () => { return React.useContext(InvoiceContext) };

  render() {
    if (this.props.invoiceType === 'digtal') {
      return <Digtal {...this.props}></Digtal>;
    } else {
      return <Main {...this.props}></Main>;
    }
  }
}

/** 默认 */
const Main = (props: IInvoiceProps) => {

  const controller = React.useMemo(() => props.controller || new InvoiceController(), [props.controller]);

  const [key, setKey] = React.useState(0);

  useToGenerateId(controller);

  React.useEffect(() => { setKey(key + 1) }, [controller]);

  return (
    <InvoiceContext.Provider key={key} value={controller}>

      <div className="kts-invoice-operate" ref={controller.pipeline<HTMLDivElement | null>(async (s, e) => { s.rootElement = e })} >
        {props.invoiceHeader || <InvoiceHeader /> /**    发票头 */}
        {props.buyer || <Buyer /> /**                    购买方 */}
        {props.goodsList || <GoodsList /> /**            货物列表 */}
        {props.seller || <Seller /> /**                  销售方 */}
        {props.sign || <Sign /> /**                      落款 */}
        {props.footExpand}
      </div>

      <ImportBuyerDrawer />{/*         导入购买方的抽屉 */}
      <ImportGoodsDrawer />{/*         导入货品的抽屉 */}
      <EndowCodeDrawer />{/*           给货品赋码的抽屉 */}
      <AddComparisonDrawer />{/*       添加商品对照的抽屉 */}
    </InvoiceContext.Provider>
  );
};

/** 数电 */
const Digtal = (props: IInvoiceProps) => {

  const controller = React.useMemo(() => props.controller || new InvoiceController(), [props.controller]);

  const [key, setKey] = React.useState(0);

  useToGenerateId(controller);

  React.useEffect(() => { setKey(key + 1) }, [controller]);

  return (
    <InvoiceContext.Provider key={key} value={controller}>
      <div className="kts-invoice-operate-digtal" ref={controller.pipeline<HTMLDivElement | null>(async (s, e) => { s.rootElement = e })} >
        {props.invoiceHeader || <InvoiceHeaderDigtal />       /** 发票头          */}
        <div className='kts-invoice-operate-digtal-cont' >
          {props.stakeholder || <Stakeholder />               /** 干系人          */}
          {props.goodsList || <GoodsListDigtal />             /** 货物列表        */}
        </div>
        {props.specialInfor                                   /** 特殊信息        */}
        {props.sign || <SignDigtal />                         /** 落款            */}
      </div>

      <ImportGoodsDrawer />{                                  /** 导入货品的抽屉   */}
      <EndowCodeDrawer />{                                    /** 给货品赋码的抽屉 */}
    </InvoiceContext.Provider>
  )
}