import { Stage } from '@/hooks/useTransition'
 
import { EXPAND_TRANSITION_DURATION_MS } from './constants'
 
export const Root = styled.div<{
  expandStage: Stage
}>`
  ${({ expandStage }) => {
    const isTransitioning =
      expandStage === 'entering' ||
      expandStage === 'exiting'
 
    const isTransitionIn =
      expandStage === 'entering' ||
      expandStage === 'entered'
 
    return css`
      ${isTransitioning &&
      css`
        // пока анимация играет, ставим транзишен
        ${FullDescriptionWrap} {
          transition: transform ${EXPAND_TRANSITION_DURATION_MS}ms;
        }
 
        ${DarkOverlay} {
          transition: opacity ${EXPAND_TRANSITION_DURATION_MS}ms;
        }
      `}
 
      ${!isTransitionIn &&
      css`
        // анимация закрытия - уезжание описания под экран
        ${FullDescriptionWrap} {
          transform: translateY(100%);
        }
 
        // Не отображаем тёмный оверлей
        ${DarkOverlay} {
          pointer-events: none;
          opacity: 0;
        }
      `}
 
      ${expandStage === 'exited' &&
      css`
        // когда анимация закрытия закончилась, ставим display: none, чтобы элемент невозможно было
        // случайно увидеть, например, при открытии мобильной клавиатуры
        ${FullDescriptionWrap} {
          visibility: hidden;
        }
      `}
    `
  }}
`