import { alpha, Box, Card, Dialog, Slide, styled } from '@mui/material'
import { TransitionProps } from '@mui/material/transitions'
import { forwardRef } from 'react'
import { background, contactBg } from '../../Header/assets'

export const StyledDialogHeader = styled(Box)(({ theme }) => ({
  height: '180px',
  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
  backgroundImage: `url(${background})`,
  backgroundSize: 'cover',
  display: 'flex',
  alignItems: 'start',
  justifyContent: 'flex-end',
  padding: '0.6rem 1rem',
}))

export const StyledDialog = styled(Dialog)(() => ({
  zIndex: 500,
  transition: 'max-height 0.3s ease-in-out',
  '& .MuiDialog-container': {
    justifyContent: 'flex-end',
    alignItems: 'end',

    '& .MuiPaper-root': {
      maxWidth: '380px',
    },
  },
}))

export const StyledCard = styled(Card)(() => ({
  display: 'flex',
  position: 'absolute',
  width: '340px',
  justifyContent: 'space-between',
  margin: '-30px 20px 0 20px',
  padding: '20px 15px',
  cursor: 'pointer',
  boxShadow: '0px 3px 15px #0000001A',
}))

export const StyledContactHeader = styled(Box)(({ theme }) => ({
  height: '170px',
  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
  backgroundImage: `url(${contactBg})`,
  backgroundSize: 'cover',
  display: 'flex',
  alignItems: 'start',
  justifyContent: 'space-between',
  padding: '0.6rem 1rem',
}))

export const StyledContactCard = styled(Card)(() => ({
  minHeight: '50px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  padding: '10px',
  cursor: 'pointer',
  border: '1px solid #0000001A',
  backgroundColor: '#cfbdbd1a',
}))

export const StyledDialogCard = styled(Card)(() => ({
  padding: '20px',
  boxShadow: '0px 5px 10px #0000001A',
  width: '350px',
  margin: 'auto',
  maxHeight: '550px',
  overflowY: 'auto',
  '&::-webkit-scrollbar': {
    width: '0px',
    height: '0px',
  },
  marginTop: '-90px',
  marginLeft: '-4px',
  position: 'absolute',
}))

export const StyledContactBoxHeader = styled(Box)(() => ({
  marginTop: '40px',
  display: 'flex',
  alignItems: 'center',
  gap: '5px',
  cursor: 'pointer',
}))

export const Transition = forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement
  },
  ref: React.Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />
})
