import styled, { css, keyframes, SimpleInterpolation } from 'styled-components'


const MIN_LIST_SIZE = 300
const MIN_DETAIL_SIZE = 400

const smallScreen = (styles: SimpleInterpolation) => css`
  @media (max-width: ${MIN_LIST_SIZE + MIN_DETAIL_SIZE}px) {
    ${styles}
  }
`

export const ListPane = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;

  ${smallScreen(css`
    padding-bottom: 100px;
  `)}
`

export const DetailPane = styled.div`
  border-left: 2px solid #d5d5d5;
  padding: 14px;
  overflow: auto;

  ${smallScreen(css`
    position: absolute;
    background: #f5f5f5;
    left: 0;
    right: 0;
    top: 20%;
    bottom: 0;
    z-index: 1;
    border-radius: 34px 34px 0 0;
    box-shadow: 0px -6px 18px 0px #cbcbcb;
    padding: 24px;
    transform: translateY(80%);
    transition: 0.2s transform ease-out;

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent 10%, #f1f1f1 17%);
      border-radius: inherit;
      z-index: 1;
      pointer-events: none;
      transition: 0.2s opacity ease-out;
    }

    &:hover {
      transform: none;

      &::before {
        opacity: 0;
      }
    }
  `)}
`

export const EventExplorerContainer = styled.div`
  position: relative;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns:
    minmax(${MIN_LIST_SIZE}px, 400px)
    minmax(${MIN_DETAIL_SIZE}px, 1fr);

  ${smallScreen(css`
    display: flex;
  `)}
`

export const PlaceholderMsg = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  ${smallScreen(css`
    align-items: flex-start;
  `)}
`

const fadeIn = keyframes`
  0% {
    opacity: 0;
    transform: translateY(1px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
`

export const NoMatchingEventsMsg = styled.div`
  margin: auto;
  margin-top: 26px;
  animation: ${fadeIn} 0.4s ease-in-out;
`