import {Block, Flex, Text, Press, ScrollView} from './Components'
import {RTX} from './constants/constants'

interface ListItem {
  id?: number
  title?: string
}
interface ChangeTab {
  list: ListItem[]
  current?: number
  onChange?: Function
  isScroll?: boolean
  itemWidth?: string

  fontSize?: string
  color?: string
  selectColor?: string
  bgColor?: string
}

const CatLine = (props: ChangeTab) => {
  const {list, bgColor='#ffffff', hoverColor='#f2f2f2', current=0, onChange=() => {}, isScroll=false, itemWidth, fontSize='32', selectColor='#1890ff', color='#060606'} = props

  
  return (
    <Block>
      {
        !isScroll ?
        <Flex size='100% 86' flex='frac' bgColor={bgColor}>
          {
            list.length > 0 &&
            list.map((item, index) => (
              <Press onClick={() => {onChange(index)}} key={item.id}>
                <Flex size='auto 86' padding='0 25' flex='frcc'>
                  {
                    current === index ?
                    <Text fontSize={fontSize} color={selectColor} >{item.title}</Text>
                    :
                    <Text fontSize={fontSize} color={color}>{item.title}</Text>
                  }
                </Flex>
              </Press>
            ))
          }
        </Flex>
        :
        <ScrollView scrollX scrollLeft={itemWidth ? ((current - 1) * (+itemWidth + 50)) : undefined} size='100% 86' bgColor={bgColor} padding='0 20' scrollWithAnimation>
          {
            list.length > 0 &&
            list.map((item, index) => (
              <Press onClick={() => {onChange(index)}} key={item.id} hoverBgColor={hoverColor}>
                <Flex flex='frcc' size={`${itemWidth || '100%'} 86`} margin='0 25'>
                  {
                    current === index ?
                    <Text fontSize={fontSize} color={selectColor} >{item.title}</Text>
                    :
                    <Text fontSize={fontSize} color={color} >{item.title}</Text>
                  }
                </Flex>
              </Press>
            ))
          }
        </ScrollView>
      }
    </Block>
  )
}

export default CatLine