import React, { useMemo } from 'react'
import styles from './index.module.scss'
import { Tabs } from 'antd'
import type { TabsProps } from 'antd'
import { ClueItem, RelativeItem, MartyrItem } from '@/types'
import { cityIdToName } from '@/pages/A1home/util'

type MapTabProps = {
  cityId: string
  setCityId: (cityId: string) => void
  clueList: Record<string, ClueItem[]>
  relativeList: Record<string, RelativeItem[]>
  martyrListByCity: Record<string, MartyrItem[]>
  handleItemClick: (cityId: string, name: string, martyrId: number) => void
}
function MapTab(props: MapTabProps) {
  const cityName = useMemo(() => cityIdToName[props.cityId], [props.cityId])

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '烈士',
      children: props.martyrListByCity[cityName].map((item, index) => (
        <div
          className='text'
          onClick={() => props.handleItemClick(props.cityId, item.name, item.id)}
          key={index}
        >
          {item.name}
        </div>
      ))
    }
    // {
    //   key: '2',
    //   label: '亲属',
    //   children: props.relativeList[cityName]?.map((item, index) => (
    //     <div
    //       className='text'
    //       onClick={() =>
    //         props.handleItemClick(props.cityId, item.martyrName, item.martyrId)
    //       }
    //       key={index}
    //     >
    //       {item.name}
    //     </div>
    //   )) || <div>暂无</div>
    // },
    // {
    //   key: '3',
    //   label: '线索',
    //   children: props.clueList[cityName]?.map((item, index) => (
    //     <div
    //       className='text'
    //       onClick={() =>
    //         props.handleItemClick(props.cityId, item.martyrName, item.martyrId)
    //       }
    //       key={index}
    //     >
    //       {item.remark}
    //     </div>
    //   )) || <div>暂无</div>
    // }
  ]

  const operations = (
    <img
      onClick={e => {
        e.stopPropagation()
        props.setCityId('')
      }}
      src={require('@/assets/img/close.png')}
      alt=''
    />
  )
  return (
    <div className={styles.MapTab}>
      <Tabs defaultActiveKey='1' tabBarExtraContent={operations} items={items} />
    </div>
  )
}

const MemoMapTab = React.memo(MapTab)

export default MemoMapTab
