// ** Next Import
import Link from 'next/link'

// ** MUI Imports
import IconButton from '@mui/material/IconButton'
import Box, { BoxProps } from '@mui/material/Box'
import { styled, useTheme } from '@mui/material/styles'
import Typography, { TypographyProps } from '@mui/material/Typography'

// ** Type Import
import { LayoutProps } from 'src/@core/layouts/types'

// ** Custom Icon Import
import Icon from 'src/@core/components/icon'

// ** Configs
import themeConfig from 'src/configs/themeConfig'

interface Props {
  navHover: boolean
  collapsedNavWidth: number
  hidden: LayoutProps['hidden']
  navigationBorderWidth: number
  toggleNavVisibility: () => void
  settings: LayoutProps['settings']
  saveSettings: LayoutProps['saveSettings']
  navMenuBranding?: LayoutProps['verticalLayoutProps']['navMenu']['branding']
  menuLockedIcon?: LayoutProps['verticalLayoutProps']['navMenu']['lockedIcon']
  menuUnlockedIcon?: LayoutProps['verticalLayoutProps']['navMenu']['unlockedIcon']
}

// ** Styled Components
const MenuHeaderWrapper = styled(Box)<BoxProps>(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  paddingRight: theme.spacing(4),
  justifyContent: 'space-between',
  transition: 'padding .25s ease-in-out',
  minHeight: theme.mixins.toolbar.minHeight
}))

const HeaderTitle = styled(Typography)<TypographyProps>({
  fontWeight: 700,
  lineHeight: 1.2,
  transition: 'opacity .25s ease-in-out, margin .25s ease-in-out'
})

const LinkStyled = styled(Link)({
  display: 'flex',
  alignItems: 'center',
  textDecoration: 'none'
})

const VerticalNavHeader = (props: Props) => {
  // ** Props
  const {
    hidden,
    navHover,
    settings,
    saveSettings,
    collapsedNavWidth,
    toggleNavVisibility,
    navigationBorderWidth,
    menuLockedIcon: userMenuLockedIcon,
    navMenuBranding: userNavMenuBranding,
    menuUnlockedIcon: userMenuUnlockedIcon
  } = props

  // ** Hooks & Vars
  const theme = useTheme()
  const { mode, direction, navCollapsed } = settings
  const menuCollapsedStyles = navCollapsed && !navHover ? { opacity: 0 } : { opacity: 1 }

  const svgFillSecondary = () => {
    if (mode === 'semi-dark') {
      return `rgba(${theme.palette.customColors.dark}, 0.6)`
    } else {
      return theme.palette.text.secondary
    }
  }
  const svgFillDisabled = () => {
    if (mode === 'semi-dark') {
      return `rgba(${theme.palette.customColors.dark}, 0.38)`
    } else {
      return theme.palette.text.disabled
    }
  }

  const menuHeaderPaddingLeft = () => {
    if (navCollapsed && !navHover) {
      if (userNavMenuBranding) {
        return 0
      } else {
        return (collapsedNavWidth - navigationBorderWidth - 40) / 8
      }
    } else {
      return 5.5
    }
  }

  const svgRotationDeg = () => {
    if (navCollapsed) {
      if (direction === 'rtl') {
        if (navHover) {
          return 0
        } else {
          return 180
        }
      } else {
        if (navHover) {
          return 180
        } else {
          return 0
        }
      }
    } else {
      if (direction === 'rtl') {
        return 180
      } else {
        return 0
      }
    }
  }

  return (
    <MenuHeaderWrapper className='nav-header' sx={{ pl: menuHeaderPaddingLeft() }}>
      {userNavMenuBranding ? (
        userNavMenuBranding(props)
      ) : (
        <LinkStyled href='/'>
          <svg width="40" height="36" viewBox="0 0 40 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clipPath="url(#clip0_522_2374)">
              <path d="M37.288 32.9484C36.8156 32.3009 36.4306 31.6535 36.1682 31.0586C35.8882 30.4112 35.8357 30.0437 35.8357 29.8687V25.6343C35.8357 24.8994 35.7307 24.147 35.5208 23.3946C35.2933 22.6247 34.9608 21.9072 34.5059 21.2423C34.1209 20.6649 33.631 20.14 33.0536 19.685C33.736 19.1251 34.3134 18.5302 34.7684 17.8827C35.7832 16.4654 36.3082 14.9256 36.3082 13.2808C36.3082 11.636 35.9932 10.6911 35.3808 9.4313C34.7684 8.20646 33.876 7.0866 32.7211 6.14171C31.5837 5.21433 30.2014 4.44443 28.5916 3.8845C26.9818 3.32457 25.9495 3.11459 23.9197 3.11459H22.7299L19.7902 10.7611L23.1323 10.5512C23.7272 10.5512 24.2697 10.6387 24.7596 10.8136C25.232 10.9711 25.652 11.1986 25.967 11.4785C26.2644 11.7235 26.4919 12.0035 26.6669 12.3534C26.8243 12.6684 26.9118 13.0184 26.9118 13.4033C26.9118 13.7883 26.8418 14.1207 26.6669 14.4182C26.4919 14.7506 26.2469 15.0306 25.932 15.2581C25.582 15.5205 25.1621 15.748 24.6896 15.9055C24.1997 16.063 23.6747 16.1505 23.1323 16.1505L17.7605 16.0805L19.7902 10.7961H10.6039L0.787598 35.5905H10.1839L14.7858 23.6045H23.0623C23.7972 23.6045 24.4096 23.7095 24.8821 23.8495C25.302 23.9895 25.652 24.1645 25.8795 24.3569C26.0719 24.5319 26.2119 24.7069 26.2819 24.8994C26.3694 25.1268 26.4219 25.3368 26.4219 25.5643V30.0087C26.4219 30.2887 26.4219 30.6037 26.4569 30.9711C26.4919 31.3561 26.5444 31.7585 26.6494 32.1785C26.7544 32.6334 26.9118 33.1058 27.1218 33.5783C27.3318 34.0507 27.6117 34.5232 27.9442 34.9606L28.4516 35.608H39.1953L37.2705 32.9659H37.288V32.9484Z" fill="#666CFF" />
              <path d="M17.8478 1.5923C19.4226 3.46457 19.7376 10.7787 19.7376 10.7787C19.7376 10.7787 12.6159 9.18635 11.0411 7.29659C9.46634 5.42432 9.71131 2.62467 11.6011 1.04987C13.4733 -0.524936 16.273 -0.279967 17.8478 1.6098V1.5923Z" fill="#666CFF" />
            </g>
            <defs>
              <clipPath id="clip0_522_2374">
                <rect width="40" height="35.608" fill="white" />
              </clipPath>
            </defs>
          </svg>
          <HeaderTitle variant='h6' sx={{ ...menuCollapsedStyles, ...(navCollapsed && !navHover ? {} : { ml: 2 }) }}>
            {themeConfig.templateName}
          </HeaderTitle>
        </LinkStyled>
      )}

      {hidden ? (
        <IconButton
          disableRipple
          disableFocusRipple
          onClick={toggleNavVisibility}
          sx={{ p: 0, backgroundColor: 'transparent !important' }}
        >
          <Icon icon='mdi:close' fontSize={20} />
        </IconButton>
      ) : userMenuLockedIcon === null && userMenuUnlockedIcon === null ? null : (
        <IconButton
          disableRipple
          disableFocusRipple
          onClick={() => saveSettings({ ...settings, navCollapsed: !navCollapsed })}
          sx={{ p: 0, color: 'text.primary', backgroundColor: 'transparent !important' }}
        >
          {userMenuLockedIcon && userMenuUnlockedIcon ? (
            navCollapsed ? (
              userMenuUnlockedIcon
            ) : (
              userMenuLockedIcon
            )
          ) : (
            <Box
              width={22}
              fill='none'
              height={22}
              component='svg'
              viewBox='0 0 22 22'
              xmlns='http://www.w3.org/2000/svg'
              sx={{
                transform: `rotate(${svgRotationDeg()}deg)`,
                transition: 'transform .25s ease-in-out .35s'
              }}
            >
              <path
                fill={svgFillSecondary()}
                d='M11.4854 4.88844C11.0082 4.41121 10.2344 4.41121 9.75716 4.88844L4.51029 10.1353C4.03299 10.6126 4.03299 11.3865 4.51029 11.8638L9.75716 17.1107C10.2344 17.5879 11.0082 17.5879 11.4854 17.1107C11.9626 16.6334 11.9626 15.8597 11.4854 15.3824L7.96674 11.8638C7.48943 11.3865 7.48943 10.6126 7.96674 10.1353L11.4854 6.61667C11.9626 6.13943 11.9626 5.36568 11.4854 4.88844Z'
              />
              <path
                fill={svgFillDisabled()}
                d='M15.8683 4.88844L10.6214 10.1353C10.1441 10.6126 10.1441 11.3865 10.6214 11.8638L15.8683 17.1107C16.3455 17.5879 17.1193 17.5879 17.5965 17.1107C18.0737 16.6334 18.0737 15.8597 17.5965 15.3824L14.0779 11.8638C13.6005 11.3865 13.6005 10.6126 14.0779 10.1353L17.5965 6.61667C18.0737 6.13943 18.0737 5.36568 17.5965 4.88844C17.1193 4.41121 16.3455 4.41121 15.8683 4.88844Z'
              />
            </Box>
          )}
        </IconButton>
      )}
    </MenuHeaderWrapper>
  )
}

export default VerticalNavHeader