import { Grid } from '@mui/material'
import styled from '@emotion/styled'
import { useNavigate } from 'react-router-dom'
import appConfig from '@/configs/app'
import ProductDrawer from './ProductDrawer'
import type { Theme } from '@mui/material'

const AppLeftContainer = styled('div')(({ theme }) => {
  const t = theme as Theme
  return {
    display: 'flex',
    flexWrap: 'nowrap',
    alignItems: 'start',
    '& > .logo': {
      display: 'inline-block',
      width: '48px',
      height: '36px',
      paddingRight: '.5rem',
      marginRight: '4px',
      borderRight: `1px solid ${
        t.palette.mode === 'dark' ? t.palette.grey[800] : t.palette.grey[100]
      }`,
    },
    '& > .name': {
      textAlign: 'left',
      '& > .label': {
        margin: 0,
        lineHeight: 1.5,
        paddingLeft: '8px',
        fontSize: '.8rem',
        textTransform: 'uppercase',
        fontWeight: 'bold',
        color: t.palette.yacolor.fc[t.palette.mode],
      },
    },
  }
})

const LeftContainer: React.FC = () => {
  const { navbar, name } = appConfig
  const logoPath = `/src/${navbar.logo}`
  const logoAlt = navbar.alt || name
  const hasLogo = navbar.logo && navbar.alt !== ''
  const navigate = useNavigate()
  const jumpto = () => {
    navigate(navbar.homePath || '/', { replace: false })
  }
  return (
    <Grid item xs={2}>
      <AppLeftContainer>
        {hasLogo && <img className="logo" src={logoPath} alt={logoAlt} onClick={jumpto} />}
        <div className="name">
          <p className="label">{name}</p>
          <ProductDrawer />
        </div>
      </AppLeftContainer>
    </Grid>
  )
}

export default LeftContainer