import { memo, useCallback, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Button } from 'antd'
import formConfig from './config'
import BaseModel from '@/base-ui/model'
import useModel from '@/hooks/useModel'
import useAppSelector from '@/hooks/useAppSelector'
import useAppDispatch from '@/hooks/useAppDispatch'
import { increment } from '@/store/modules'
interface Iprops {
  children?: ReactNode
}
const Login: FC<Iprops> = () => {
  const [defaultInfo, setDefaultInfo] = useState({})
  const [title, setTitle] = useState('编辑')
  const { modelRef, open } = useModel()
  const onSucess = useCallback((values: any) => {
    console.log(values)
  }, [])
  const edit1 = () => {
    setDefaultInfo({
      name: '1',
      address: {
        province: '11'
      }
    })
    setTitle('编辑1')
    open()
  }
  const edit2 = () => {
    setDefaultInfo({
      name: '2',
      file: 24
    })
    setTitle('编辑2')
    open()
  }

  const count = useAppSelector((state) => {
    return state.index.count
  })

  const dispatch = useAppDispatch()

  const addCount = () => {
    dispatch(increment())
  }

  return (
    <div className="pt-12 px-24">
      <BaseModel
        title={title}
        ref={modelRef}
        modelConfig={formConfig}
        width={800}
        onSucess={onSucess}
        defaultInfo={defaultInfo}
      />
      <Button onClick={edit1}>编辑1</Button>
      <Button className="ml-2" onClick={edit2}>
        编辑2
      </Button>
      <h1>当前计数:{count}</h1>
      <Button onClick={addCount}>当前计数+1</Button>
    </div>
  )
}

export default memo(Login)