import React, { useState, useEffect } from 'react'
import styles from './index.module.scss'
import { Input, Tabs } from 'antd'
import type { TabsProps } from 'antd'
import classNames from 'classnames'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import { MartyrItem } from '@/types/api/martyr'
import { nameToCityId } from '../../A1home/util'
import ImageLazy from '@/components/ImageLazy'
import noImg from '@/assets/img/noImg.png'

type BottomSearchProps = {
  classN: string
  handleItemClick: (cityId: string, name: string, martyrId: number) => void
}
function BottomSearch({ classN, handleItemClick }: BottomSearchProps) {
  const [isShowResult, setIsShowResult] = useState(false)
  const [searchName, setSearchName] = useState('')
  const [searchList, setSearchList] = useState<MartyrItem[]>([])

  const { list: listAll } = useSelector((state: RootState) => state.Martyr.tableInfo)
  console.log(listAll.length, 'bottomSearch')

  useEffect(() => {
    const martyrSearch = (name: string) => {
      return listAll.filter(item => item.name.includes(name))
    }

    setSearchList(martyrSearch(searchName))
  }, [listAll, searchName])

  const handleContentClick = (item: MartyrItem, e: React.MouseEvent) => {
    console.log(nameToCityId[item.nativeCity])
    handleItemClick(nameToCityId[item.nativeCity], item.name, item.id)
    setIsShowResult(false)
    e.stopPropagation()
  }

  const MainInfo = ({ item }: { item: MartyrItem }) => {
    return (
      <div
        className='searchItem'
        onClick={e => handleContentClick(item, e)}
        key={item.id}
      >
        <div className='mainInfo'>
          <div className='left' onClick={e => e.stopPropagation()}>
            <ImageLazy
              width={'100%'}
              height={'100%'}
              src={item.thumb}
              srcBig={item.thumbPc}
              imgError={noImg}
            />
          </div>
          <div className='right'>
            <div className='name'>
              <div className='Name'>{item.name}</div>
              <div className='other'>{item.dictPanName}</div>
            </div>
            <div className='gender'>
              {item.gender} | {item.nation}
            </div>
            <div className='birth'>
              {item.dateStart} - {item.dateEnd}
            </div>
            <div className='home'>{`籍贯：${item.nativeProvince}-${item.nativeCity}-${item.nativeRegion}`}</div>
          </div>
        </div>
      </div>
    )
  }

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '全部',
      children: searchList.map(item => <MainInfo item={item} />)
    },
    {
      key: '2',
      label: '山东',
      children: searchList
        .filter(item => item.nativeProvince === '山东省')
        .map(item => <MainInfo item={item} />)
    },
    {
      key: '3',
      label: '陕西',
      children: searchList
        .filter(item => item.nativeProvince === '陕西省')
        .map(item => <MainInfo item={item} />)
    }
  ]

  const operations = (
    <img
      onClick={e => {
        e.stopPropagation()
        setIsShowResult(false)
      }}
      src={require('@/assets/img/close.png')}
      alt=''
    />
  )
  return (
    <>
      {isShowResult && <div className={styles.mood} />}
      <div
        className={classNames(styles.BottomSearch, classN)}
        onClick={() => setIsShowResult(true)}
      >
        <Input
          prefix={<img src={require('@/assets/img/prefixIcon.png')} alt='' />}
          size='large'
          placeholder='请输入烈士姓名'
          value={searchName}
          onChange={e => setSearchName(e.target.value)}
        />
        <div className='searchBtn'>
          <img src={require('@/assets/img/bottomSearchBgBtn.png')} alt='' />
        </div>
        {isShowResult && (
          <div className='searchResult'>
            <Tabs defaultActiveKey='1' tabBarExtraContent={operations} items={items} />
          </div>
        )}
      </div>
    </>
  )
}

const MemoBottomSearch = React.memo(BottomSearch)

export default MemoBottomSearch
