import * as React from 'react'
import Box from '@mui/joy/Box'
import ListItemDecorator from '@mui/joy/ListItemDecorator'
import Tabs from '@mui/joy/Tabs'
import TabList from '@mui/joy/TabList'
import Tab, { tabClasses } from '@mui/joy/Tab'
import HomeRoundedIcon from '@mui/icons-material/HomeRounded'
import FavoriteBorder from '@mui/icons-material/FavoriteBorder'
import Search from '@mui/icons-material/Search'
import Person from '@mui/icons-material/Person'

export default function NavBarMobile() {
  const [index, setIndex] = React.useState(0)
  const colors = ['primary', 'danger', 'success', 'warning']
  return (
    <Box
      sx={{
        position: 'absolute',
        width: '100%',
        bottom: 0,

        flexGrow: 1,

        p: 1,
        borderTopLeftRadius: '12px',
        borderTopRightRadius: '12px',

        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Tabs
        size='lg'
        aria-label='Bottom Navigation'
        value={index}
        onChange={(event, value) => setIndex(value)}
        sx={theme => ({
          p: 1,
          borderRadius: 16,
          maxWidth: 500,
          // mx: 'auto',
          boxShadow: theme.shadow.sm,
          '--joy-shadowChannel': theme.vars.palette[colors[index]].darkChannel,
          [`& .${tabClasses.root}`]: {
            py: 1,
            flex: 1,
            transition: '0.3s',
            fontWeight: 'md',
            fontSize: 'md',
            [`&:not(.${tabClasses.selected}):not(:hover)`]: {
              opacity: 0.7,
            },
          },
        })}
      >
        <TabList
          variant='plain'
          size='sm'
          disableUnderline
          sx={{ borderRadius: 'lg', p: 0 }}
        >
          <Tab
            disableIndicator
            orientation='vertical'
            {...(index === 0 && { color: colors[0] })}
          >
            <ListItemDecorator>
              <HomeRoundedIcon />
            </ListItemDecorator>
            Home
          </Tab>
          <Tab
            disableIndicator
            orientation='vertical'
            {...(index === 1 && { color: colors[1] })}
          >
            <ListItemDecorator>
              <FavoriteBorder />
            </ListItemDecorator>
            Likes
          </Tab>
          <Tab
            disableIndicator
            orientation='vertical'
            {...(index === 2 && { color: colors[2] })}
          >
            <ListItemDecorator>
              <Search />
            </ListItemDecorator>
            Search
          </Tab>
          <Tab
            disableIndicator
            orientation='vertical'
            {...(index === 3 && { color: colors[3] })}
          >
            <ListItemDecorator>
              <Person />
            </ListItemDecorator>
            Profile
          </Tab>
        </TabList>
      </Tabs>
    </Box>
  )
}