import { KeyboardArrowLeft } from '@mui/icons-material'
import { Avatar, Box, FormLabel, Tabs, styled } from '@mui/material'
import CoverBg from '../../assets/images/CoverBg.png'

export const StyledSubContainer = styled(Box)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  gap: '5px',
  height: '50vh',
}))
export const StyledArrowIcon = styled(KeyboardArrowLeft)({
  marginRight: '8px',
  width: '2rem',
  height: '25px',
  cursor: 'pointer',
  color: 'white',
})
export const StyledMainContainer = styled(Box)(({ theme }) => ({
  maxHeight: '50vh',
  height: 'auto',
  marginTop: '25px',
  overflowY: 'auto',
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },

  border: theme.borders.grayLight,
  borderRadius: '10px',
  '& .MuiTabs-root': {
    backgroundColor: 'white',
    borderBottom: theme.borders.grayLight,
    '& .MuiTab-root': {
      padding: '0 20px',
      paddingBottom: '8px',
    },
  },
}))
export const StyledTabs = styled(Tabs)<{
  size: 'small' | 'medium'
  indicatorBackgroundColor?: string
  textColor?: string
}>(({ theme, size, indicatorBackgroundColor, textColor }) => ({
  borderTopRightRadius: '10px',
  borderTopLeftRadius: '10px',
  background: theme.palette.secondary.light,
  minHeight: '60px',
  paddingLeft: '15px',
  '& .MuiTabs-flexContainer': {
    height: '100%',
    alignItems: 'end',
  },
  '& .MuiTabs-indicator': {
    backgroundColor: indicatorBackgroundColor || theme.palette.common.yellow,
  },
  '& .MuiTab-root.Mui-selected': {
    color: textColor || theme.palette.secondary.main,
  },
  '& .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',
  },
}))

export const StyledComponentWrapper = styled(Box)<{}>(({ theme }) => ({
  padding: '15px',
  height: '50vh',
  overflow: 'auto',

  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },
}))

export const StyledUploadContainer = styled(FormLabel)({
  border: '1px dashed #0000001A',
  padding: '40px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  borderRadius: '10px',
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: '#EFEFEF',
  },
})

export const StyledUploadedFileContainer = styled(Box)({
  border: '1px solid #1212121A',
  borderRadius: '10px',
  padding: '10px',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  margin: '10px 0px',
})

export const StyledBox = styled(Box)({
  height: '200px',
  width: '100%',
  background: `url(${CoverBg})`,
  position: 'absolute',
  left: 0,
  top: 0,
  zIndex: 0,
})

export const StyledBoxHeader = styled(Box)({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'flex-end',
  marginTop: '1rem',
})

export const StyledAvatar = styled(Avatar)({
  width: '160px',
  height: '160px',
  borderRadius: '10px',
  backgroundColor: 'lightgrey',
})
