import styled from 'styleh-components'
import { Image, ImageElement } from 'atoms/Image'
import Blink from 'atoms/Blink'
import { CssProps, MediaCarouselCommonProps } from './typings'

export interface StyledCssProps {
  itemHeight?: CssProps.ItemHeight
  gridGap?: CssProps.GridGap
  flexWidth?: CssProps.FlexWidth
  translatePercentage?: CssProps.TranslatePercentage
}

/**
 * @info
 * browser support for clip-path
 * https://caniuse.com/#feat=css-clip-path
 */

/**
 * @info
 * 250% - clip-path height (y axis)
 * because, clip-path controls masking.
 */

const CarouselWrapper = styled.section`
  position: relative;
  text-align: center;
  clip-path: polygon(100% 0, 100% 250%, 0 250%, 0 0);
  width: 100%;
  z-index: 1;
`

const CarouselPanel = styled.div`
  height: auto;
  position: relative;
  z-index: 1;
`
const ItemNavigation = styled.a`
  width: 100%;
`

const ItemListPanel = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  transition: all 600ms ease;
  transform: ${(props: StyledCssProps) =>
    'translateX(-' + props.translatePercentage + '%)'};
`

const ItemPanel = styled.div`
  /* state - application error */
  flex: 0 0 ${(props: MediaCarouselCommonProps) => 100 / props.desktopColSpan}%;

  @media (max-width: 1023px) {
    flex: 0 0 ${(props: MediaCarouselCommonProps) => 100 / props.tabletColSpan}%;
  }

  @media (max-width: 767px) {
    flex: 0 0 ${(props: MediaCarouselCommonProps) => 100 / props.mobileColSpan}%;
  }

  padding: 0 ${(props: StyledCssProps) => props.gridGap / 2}px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 600ms ease;
`

const StyledImage = styled(Image)`
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: ${(props: StyledCssProps) => props.itemHeight + 'px'};
  border: 1px solid #f0f0f0;
  ${ImageElement} {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    width: auto;
    height: auto;
  }
`

const StyledBlink = styled(Blink)`
  font-family: 'Roboto', Arial;
  font-size: 16px;
  color: black;
`

export {
  CarouselWrapper,
  CarouselPanel,
  ItemListPanel,
  ItemPanel,
  ItemNavigation,
  StyledImage,
  StyledBlink,
}