import React, { useRef, useState } from 'react'
import { View, ScrollView } from '@tarojs/components'
import './style.scss'

export default (props) => {
  const { current, tabs, onChange } = props
  const idPreRef = useRef(`scroll-it-${Math.random().toString(26).substring(2, 9)}`)

  const handleTabClick = (index) => {
    if (onChange) {
      onChange(index + 1)
    }
  }

  return (
    <View className='yz-tabs'>
      <ScrollView scrollX scrollIntoView={`${idPreRef.current}-${current}`}>
        <View className='yz-tabs-nav'>
        {
          (tabs||[]).map((item, index) => {
            const activeClass = current === (index + 1) ? 'active' : ''

            return (
              <View
                key={item}
                id={`${idPreRef.current}-${index}`}
                className='yz-tabs-tab'
                onClick={() => handleTabClick(index)}
              >
                <view className={`yz-tabs-tab-title ${activeClass}`}>
                  {item}
                </view>
              </View>
            )
          })
        }
        </View>
      </ScrollView>
    </View>
  )
}
