import {
  AppBar,
  Avatar,
  Box,
  Button,
  buttonClasses,
  styled,
} from '@mui/material'
import type React from 'react'
import { getAvatarMask } from '../Avatar/utils.js'

export const HeaderAppBar: React.FC<
  React.ComponentProps<typeof AppBar> & { sticky?: boolean }
> = styled(AppBar)(({ theme }) => ({
  backgroundColor: 'transparent',
  ...theme.applyStyles('dark', {
    backgroundColor: 'transparent',
  }),
  color: theme.vars.palette.text.primary,
  flexDirection: 'row',
  alignItems: 'center',
  position: 'relative',
}))

export const Container: React.FC<
  React.ComponentProps<typeof Box> & { sticky?: boolean }
> = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'sticky',
})<{ sticky?: boolean }>(({ theme, sticky }) => {
  return {
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: theme.vars.palette.background.default,
    position: sticky ? 'sticky' : 'relative',
    top: 0,
    zIndex: 1200,
    gap: theme.spacing(0.5),
    padding: theme.spacing(1.5, 3, 0, 3),
    overflow: 'auto',
    borderRadius: theme.container?.borderRadius ?? 0,
    ...theme.header,
    ...(theme.header?.position === 'fixed'
      ? {
          minWidth: theme.breakpoints.values.xs,
          maxWidth: theme.breakpoints.values.sm,
          width: '100%',
        }
      : {}),
  }
})

export const WalletButton: React.FC<
  React.ComponentProps<typeof Button> & { withOffset?: boolean }
> = styled(Button, {
  shouldForwardProp: (prop) => prop !== 'withOffset',
})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({
  color: theme.vars.palette.text.primary,
  padding: theme.spacing(1, 1.5),
  maxHeight: 40,
  fontSize: '0.875rem',
  fontWeight: 600,
  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
  backgroundColor: 'transparent',
  '&:hover': {
    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
  },
  ...theme.applyStyles('dark', {
    backgroundColor: 'transparent',
    '&:hover': {
      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
    },
  }),
  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
    fontSize: '24px',
  },
  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {
    fontSize: '24px',
  },
  ...(theme.navigation.edge && {
    marginRight: withOffset ? theme.spacing(-1.25) : 0,
  }),
}))

export const DrawerWalletContainer: React.FC<
  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }
> = styled(Box)(({ theme }) => ({
  width: '100%',
  display: 'flex',
  justifyContent: 'space-between',

  ...(theme.navigation.edge && {
    '& button:first-of-type': {
      marginLeft: theme.spacing(-1),
    },
    '& button:last-of-type': {
      marginRight: theme.spacing(-1.25),
    },
  }),
}))

export const HeaderControlsContainer: React.FC<
  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }
> = styled(Box)(({ theme }) => ({
  display: 'flex',
  gap: theme.spacing(0.5),
  ...(theme.navigation.edge && {
    '& button:last-of-type': {
      marginRight: theme.spacing(-1.25),
    },
  }),
}))

export const WalletAvatar: React.FC<
  React.ComponentProps<typeof Avatar> & {
    avatarSize?: number
    badgeSize?: number
  }
> = styled(Avatar, {
  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',
})<{ avatarSize?: number; badgeSize?: number }>(
  ({ avatarSize = 24, badgeSize = 12 }) => ({
    mask: getAvatarMask(badgeSize),
    width: avatarSize,
    height: avatarSize,
  })
)