import React, { useReducer, useState, Fragment, useCallback, useEffect } from 'react'
import List from '../../components/List'
import Item from '../../components/item'
import Paging from '../../components/Paging'
import styles from './index.module.css'
import GrentOper from './GrentOper'
import {
  initialState,
  reducer,
  getList,
  getListAction,
  delItemAction,
  updateItemAction
} from './ListState'
import { useRouteMatch } from 'react-router-dom'

interface ItemsProps {
  list: Array<any>,
  children: Function,
  changePage: Function,
  total: number,
  current: number,
  number: number
}

const ListItems = (props: ItemsProps) => {
  return (
    <div className={styles.mainlayer}>
      <List data={props.list} className={styles.listlayer}>
        <Item data={['文件名', '路径', '类型', '创建时间', '当前状态', '操作']} />
        {(model: Model) => props.children(model)}
      </List>
      <div className={styles.paging}>
        <Paging
          total={props.total}
          current={props.current}
          show={5}
          number={props.number}
          handleChange={(current: number) => props.changePage(current)} />
      </div>

    </div>
  )
}


interface GrentApi {
  getUrl: string,
  delUrl: string,
  zipUrl?: string,
  sectionUrl?: string,
  transformUrl?: string,
  transferUrl?: string,
  judgeUrl?: string,
  ItemFn?: Function,
  region?: boolean
}

const useEffectRaw = useEffect
export default function GrentReducer1({ getUrl, delUrl, zipUrl, sectionUrl, transformUrl, transferUrl, judgeUrl, ItemFn, region }: GrentApi) {
  const match = useRouteMatch()
  const sid = (match?.params as any).sid

  console.log('===>', sid)
  let [showDialog1, setShowDialog1] = useState(false)
  let [showDialog2, setShowDialog2] = useState(false)
  let [referCount, setReferCount] = useState(0)
  let [modelState, modelDispatch] = useReducer(reducer, initialState())
  const models = getList(modelState)
  const updateAction = useCallback((current: number) => getListAction(modelDispatch, sid, getUrl, current), [getUrl, sid])
  const referData = () => setReferCount(++referCount)
  const delHandle = async (model: Model) => {
    await delItemAction(modelDispatch, sid, delUrl + model.id + '/', model)
    setReferCount(++referCount)
  }
  const referItem = (model: Model): Model => updateItemAction(modelDispatch, model)
  const setItemStaus = (model: Model, status: number) : Model => {
    model.ajaxStatue = status
    return referItem(model)
  }

  // updateAction(modelState.paging.current)
  useEffectRaw(() => { updateAction(modelState.paging.current) }, [referCount])

  const Element = (
    <ListItems
      list={models}
      total={modelState.paging.total}
      current={modelState.paging.current}
      number={modelState.paging.number}
      changePage={(page: number) => updateAction(page)}>
      {(model: Model) => {
        let { ItemFn: PublicItemFn } = GrentOper({
          setItemStaus,
          modelDispatch,
          referData,
          delHandle,
          api: { zip: zipUrl, section: sectionUrl, transfer: transferUrl, judge: judgeUrl, transform: transformUrl },
          region,
          showDialog1, 
          setShowDialog1,
          showDialog2,
          setShowDialog2
        })
        return (
          <Fragment key={model.id}>
            <PublicItemFn model={model} privItem={ItemFn} />
          </Fragment>
        )
        }}
    </ListItems>
  )

  return {
    modelDispatch,
    models,
    referData,
    delHandle,
    updateAction,
    referItem,
    Element,
    setItemStaus
  }
}
