import { styled } from 'styleh-components'
import Figure, {
  FigureCaption,
  StyledImage,
} from '@skava/ui/dist/components/molecules/Figure'

const StyledFigure = styled(Figure) `
  position: relative;
  display: flex;
  ${StyledImage} {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
  }
`

const StyledComponent = styled.div `
  background-color: ${props =>
    props.backgroundColor ? props.backgroundColor : '#fff'};
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`

const StyledGrid = styled.div `
  padding: ${props => (props.gridGap ? props.gridGap : 0)}px;
  flex: ${props =>
    props.direction === 'row'
      ? props.desktopColSpan && `0 0 ${props.desktopColSpan}%`
      : 1};
  ${props =>
    props.gridColSpan &&
    styled.css `
      flex: 0 0 ${props.desktopColSpan * props.gridColSpan}%;
    `};
  order: ${props => props.order};

  @tablet-or-smaller() {
    flex: ${props =>
      props.direction === 'row'
        ? props.tabletColSpan && `0 0 ${props.tabletColSpan}%`
        : 1};
    ${props =>
      props.gridColSpan &&
      styled.css `
        flex: 0 0 ${props.tabletColSpan * props.gridColSpan}%;
      `};
  }

  @phone-or-smaller() {
    flex: ${props =>
      props.direction === 'row'
        ? props.mobileColSpan && `0 0 ${props.mobileColSpan}%`
        : 1};
  }

  display: flex;
  align-items: center;
`

const StyledRow = styled.div `
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  background-color: ${props =>
    props.backgroundColor ? props.backgroundColor : '#fff'};

  ${props =>
    props.direction === 'row' &&
    styled.css `
      overflow-x: auto;
      flex-wrap: ${props.shouldWrap ? 'wrap' : 'nowrap'};
    `};
`

const StyledWrapper = styled.section `
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
`

export { StyledFigure, StyledComponent, StyledRow, StyledGrid, StyledWrapper }