import React, { useEffect, useState } from 'react'
import { isMobile } from '../../../../../utils/helper';
import { Api, SchemaNode } from '../../../../../types';
import { RendererEnv } from '../../../../../env';
import { FlowSun } from '../../type';
import './index.scss'
import message from 'antd/lib/message';
interface FlowfileAsk {
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
  env: RendererEnv
  actionsApi: Api
  contextval: FlowSun[]
  handleOnClickFather: (value: string, hierarchy: number, data?: string) => void
  handleOnChange: () => void
}

const FlowFileAsk: React.FC<FlowfileAsk> = (props) => {
  const { env, render, actionsApi, contextval, handleOnClickFather, handleOnChange } = props
  const [value, setValue] = useState<any>()
  const Mobile = isMobile()
  let timer: ReturnType<typeof setTimeout>

  useEffect(() => {
    actionsApi && handleChange()
  }, [])

  const handleDialogConfirm = (e: any, key: any) => {
    if (timer) {
      clearInterval(timer);
    }
    timer = setTimeout(() => {
      handleOnChange()
    }, 500)
  }

  const handleChange = async () => {
    // 获取初始状态
    const res = await env.fetcher(actionsApi)
    if (res.status == 0) {
      if (res.data) {
        res.data.items.forEach((item: any) => {
          item.flowActionsList.forEach((Item: any) => {
            if (Item.actionType == 'drawer') {
              Item.drawer['onConfirm'] = handleDialogConfirm
            } else if (Item.actionType == 'dialog') {
              Item.dialog['onConfirm'] = handleDialogConfirm
            }
          })
        })
      }
      setValue(res.data.items);
    } else {
      message.error(res.msg)
    }
  }

  return (
    <>
      <div className={`space-content-item_amis_staging ${Mobile ? "space-content-item—modile_Dialog" : ""}`}>
        {
          contextval.map((item) =>
            <div className='mobile-card-handle'>
              <div className='mobile-card-handle-color '
                onClick={() => { handleOnClickFather(item.key, item.hierarchy, item.data) }}>
                <div className='mobile-card-handle_text'>
                  <p className='text_name'>{item.title}</p>
                  <div className='text_number'>{item.count}</div>
                </div>
                <div className='mobile-card-handle_icon'>
                  {item.icon}
                </div>
              </div>
            </div>
          )
        }
      </div>
      {
        value && value.map((item: any, index: number) =>
          <div key={index} className={`space-content-item_amis ${!Mobile ? "space-content-item-modile_amis" : "space-content-item-Modile_amis"}`}>
            <div className="mobile-card-container_amis">
              <div className="mobile-card-title_amis">{item.title}</div>
              <div className="mobile-card-content_amis">
                {
                  item.flowActionsList && item.flowActionsList.map((item: any, index: number) =>
                    <>
                      <div className='mobile-card-item_amis'>
                        {render('data', item, { 'flowpath': true, key: index, })}
                      </div>
                    </>
                  )
                }
              </div>
            </div>
          </div>)
      }
    </>
  )
}

export default FlowFileAsk