import styled from 'styleh-components'
import { isNumber } from 'exotic'
import Image from 'atoms/Image'
import { Button } from 'atoms/Button'
import { MaterialIcon } from 'atoms/MaterialIcon'

const StyledThumbNail = styled.div`
  position: relative;
  display: flex;
  transition: 0.5s;
  left: -${props => props.steps}%;
`

const StyledBanner = styled.div`
  width: 100%;
  margin-bottom: rem(20);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
`

const StyledImage = styled.withComponent(Image)`
  display: flex;
  flex-direction: row;
  align-items: center;
`

const SliderWrapper = styled.section`
  order: ${props => props.order};
  position: relative;
  overflow: hidden;
`

const Slot = styled.div`
  position: relative;
  padding: 0 ${props => props.gridGap / 2}px 0 ${props => props.gridGap / 2}px;
  order: ${props => props.order};
  flex: 0 0 ${props => props.deviceSpecific}%;

  display: flex;
  ${props =>
    props.type == 'bannerWithThumbnail' &&
    styled.css`
      flex: 0 0 rem(80);
      position: relative;
      height: rem(80);
      width: rem(80);
      opacity: ${props => (props.pick == props.data ? 1.0 : 0.5)};
      border: ${props => (props.pick == props.data ? 'black' : 'white')} solid
        rem(2);
    `};
`

const BackwardArrow = styled.withComponent(Button)`
  order: ${props => props.order};
  cursor: pointer;
  ${props =>
    props.isAbsolute &&
    styled.css`
      position: absolute;
      top: 44%;
      background: rgba(0, 0, 0, 0.1);
      color: white;
      left: ${props.align === 'left' ? '0' : 'auto'};
      right: ${props.align === 'right' ? '0' : 'auto'};
    `};
    ${props =>
      props.isDisabled &&
      styled.css`
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
      `};
`

const ForwardArrow = styled.withComponent(Button)`
order: ${props => props.order};
cursor: pointer;
${props =>
  props.isAbsolute &&
  styled.css`
    position: absolute;
    top: 44%;
    background: rgba(0, 0, 0, 0.1);
    color: white;
    left: ${props.align === 'left' ? '0' : 'auto'};
    right: ${props.align === 'right' ? '0' : 'auto'};
  `};
  ${props =>
    props.isDisabled &&
    styled.css`
      opacity: 0.4;
      pointer-events: none;
      cursor: not-allowed;
    `};
`

const Stepper = styled.withComponent(Button)`
  order: ${props => props.order};
  cursor: pointer;
  ${props =>
    props.isAbsolute &&
    styled.css`
      position: absolute;
      top: 44%;
      background: rgba(0, 0, 0, 0.1);
      color: white;
      left: ${props.align === 'left' ? '0' : 'auto'};
      right: ${props.align === 'right' ? '0' : 'auto'};
    `};

  ${props =>
    props.isDisabled &&
    props.arrow === 'prev' &&
    styled.css`
      pointer-events: none;
      opacity: 0.3;
      cursor: not-allowed;
    `}

  ${props =>
    props.isDisabled &&
    props.arrow === 'next' &&
    styled.css`
      pointer-events: none;
      opacity: 0.3;
      cursor: not-allowed;
    `}
`

const GalleryWrapper = styled.div`
  display: flex;
  width: 100%;
`

const StyledWrapper = styled.section`
  width: 100%;
  ${Stepper} {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    padding: rem(20) rem(8);
    font-size: rem(20);
  }
`

const StyledBullets = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: rem(16);
`

const BulletIcon = styled.div`
  width: ${props => props.bulletSize};
  height: ${props => props.bulletSize};
  background: ${props => props.bulletColor};
  margin: 0 rem(8);
  border-radius: rem(50);
  opacity: ${props => (props.pick == props.data ? 1.0 : 0.5)};
`

const StyledMaterialIcon = styled.withComponent(MaterialIcon)`
  fill: ${props => props.arrowIconColor};
  width: ${props =>
    isNumber(props.arrowIconSize)
      ? props.arrowIconSize + 'px'
      : props.arrowIconSize};
  height: auto;
  cursor: pointer;
`

export {
  StyledThumbNail,
  StyledBanner,
  StyledImage,
  Slot,
  Stepper,
  GalleryWrapper,
  StyledWrapper,
  StyledBullets,
  BulletIcon,
  ForwardArrow,
  BackwardArrow,
  SliderWrapper,
  StyledMaterialIcon,
}