import { ScrollView, View } from '@tarojs/components'
import type { ReactNode } from 'react'
import { memo, useEffect, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

interface ListProps {
  title: string
  value: number
}

interface Params {
  list?: ListProps[]
  defaultValue?: number|string
  children?: ReactNode
  tabsOnClick?: (ListProps) => void
  style?: Object

}
const Tabs = ({ list = [], defaultValue = 0, tabsOnClick, style = {} }: Params) => {
  const [selected, setSelected] = useState(defaultValue)
  const [tabId, setTabId] = useState('')

  useEffect(() => {
    const index = list?.findIndex((item) => {
      return item.value == defaultValue
    })
    if (index !== -1) {
      const num = index > 0 ? (index - 1) : 0
      setTabId(list[num].value.toString())
    }
  }, [])

  const clickEvent = ({ item, index }: { item: ListProps; index: number }) => {
    setSelected(item.value)
    tabsOnClick?.(item)
    const num = index > 0 ? (index - 1) : 0
    setTabId(list[num].value.toString())
  }
  return (
    <>
      <View className={styles.tabs_main} id="tabs_main_ref">
        <ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation scrollIntoView={`tabs_${tabId}`}>
          <View className={styles.tabs_scroll}>
            {
              list.map((item, index) => {
                return (
                  <View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({ item, index })}>
                    <View className={classnames(styles.tabs_item_con, { [styles.tabs_item_select]: selected == item.value })}>{item.title}</View>
                  </View>
                )
              })
            }
          </View>
        </ScrollView>
      </View>
    </>
  )
}
export default memo(Tabs)