import { Box, Stack, styled, Tabs } from '@mui/material'

interface StyledTabsProps {
  size: 'small' | 'medium'
  containerVariant?: 'page' | 'box'
  underlineColor?: string
  mobileUnderlineColor?: string
}

export const StyledTabs = styled(Tabs)<StyledTabsProps>(
  ({
    theme,
    size,
    containerVariant,
    underlineColor,
    mobileUnderlineColor,
  }) => ({
    borderTopRightRadius: '10px',
    borderTopLeftRadius: '10px',
    background: theme.palette.secondary.light,
    minHeight: '60px',
    ['@media(max-width: 680px)']: {
      minHeight: '30px',
      paddingTop: '15px',
    },
    paddingLeft: '15px',
    '& .MuiTabs-indicator': {
      backgroundColor: underlineColor ?? theme.palette.common.yellow,
      ['@media(max-width: 680px)']: {
        backgroundColor: mobileUnderlineColor,
      },
    },
    '& span': {
      color: theme.palette.error.main,
      fontSize: '20px',
      marginTop: '-20px',
      marginLeft: '3px  !important',
    },
    '& .MuiTabs-flexContainer': {
      height: '100%',
      alignItems: 'end',
      justifyContent: 'flex-start',
      ['@media(max-width: 680px)']: {
        justifyContent: 'center',
      },
    },
    '& .MuiTab-root': {
      textTransform: 'none',
      transition: 'color 0.2s ease-in-out',
      padding: '5px 15px',
      paddingBottom: '8px',
      minHeight: 0,
      fontSize: size === 'medium' ? '16px' : '14px',
      fontWeight: '600',
      ['@media(max-width: 680px)']: {
        fontWeight: '500',
      },
    },
    '& .MuiTab-root.Mui-selected': {
      color: theme.palette.secondary.main,
    },
    ...(containerVariant === 'page' && {
      background: 'none',
      paddingLeft: 0,
      borderBottom: theme.borders.grayLight,
    }),
  }),
)

export const StyledContainer = styled(Stack)(({ theme }) => ({
  borderRadius: '10px',
  // border: theme.borders.grayLight,
}))

export const StyledComponentWrapper = styled(Box)<{
  containerVariant: 'page' | 'box'
}>(({ theme, containerVariant }) => ({
  padding: '15px',
  height: '100%',
  ...(containerVariant === 'page' && {
    padding: '15px 0',
  }),
}))

export const StyledTabsWrapper = styled(Box)(({ theme }) => ({
  borderBottom: theme.borders.grayLight,
}))
