import React from 'react'

import Box from '../box'
import { vui } from '../core'
import { Icon } from '../icon'
import { List, ListItem } from '../list'
import { TagButton } from '../tag'
import { cs, Dict } from '../utils'
import { colors, iconSizeMapper } from './consts'
import { NavBarIconSize, TabIndexProps, TabNavBarProps } from './tabs.types'
import theme from './theme'

const { activeBg, border, color, hover, main } = colors

export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
  const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
  const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'

  const { sizes } = (theme as Dict) ?? {}

  const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize
  const h = sizes[size ?? 'md'].tabsNavBar.h
  const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth
  const py = sizes[size ?? 'md'].tabsNavBar.py
  const iconMarginRight = size === 'xxl' ? '16px' : '8px'

  const isActive = (tab: TabIndexProps) => !tab.disabled && tab?.index === activeNavItem

  return (
    <List
      alignItems="end"
      borderBottom={showBorder ? `1px solid ${border}` : 'none'}
      className={cs('vui-tabsNavBar')}
      display="flex"
      isInteractive
      mb="20px"
      ref={ref}
      w={1}
    >
      {tabs?.map?.(tab => (
        <ListItem
          activeBg={tab.disabled ? undefined : activeBg}
          bg="white"
          className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
          color={isActive(tab) ? main : color}
          disabled={tab.disabled}
          display="inline-flex"
          fontSize={fontSize}
          fontWeight={500}
          h={h}
          hoverBg={tab.disabled ? undefined : hover}
          key={tab.index}
          onClick={e => onNavItemClick?.(tab.index || 0, e)}
          position="relative"
          px="16px"
          py={py}
        >
          <Box alignItems="center">
            {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}
            {tab.title}
          </Box>
          {!!tab.onDelete && (
            <TagButton
              disabled={tab.disabled}
              hoverBg="skyBlue.80"
              hoverColor="seaBlue.main"
              isRound={false}
              ml={1}
              onClick={e => {
                e.stopPropagation()
                tab?.onDelete?.(e)
              }}
              title="Delete"
            />
          )}
          {isActive(tab) && (
            <Box
              animation={animationDirection}
              bg={main}
              bottom="-1px"
              className="vui-tabsNavBarItemActiveIndicator"
              h={borderWidth}
              left={0}
              position="absolute"
              w={1}
            >
              &nbsp;
            </Box>
          )}
        </ListItem>
      ))}
      {!!actions && (
        <Box ml="auto" px={0.75} py={0.5}>
          {actions}
        </Box>
      )}
    </List>
  )
})

TabsNavBar.displayName = 'TabsNavBar'

export default TabsNavBar
