import { styled } from 'styleh-components'
import { ImageWrapper } from 'atoms/Image'
import {
  ProductItemWrapper,
  ProductImageWrapper,
  ProductItemsWrap,
  ProductItemButtonsPanel,
  ProductDetails,
} from '../ProductItem'

import {
  DetailedList,
  DetailedListLabel,
  DetailedListValue,
  DetailedListItemPanel,
} from 'molecules/DetailedList'

const ProductItemListContainer = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
`

const ProductItemListWrapper = styled.section`
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-x: auto;

  ${DetailedListItemPanel} {
    flex-direction: row;
  }

  ${DetailedListValue} {
    margin: 0;
    margin-left: 8px;
  }

    @media(max-width: 1023px) {
      ${ProductItemListContainer} {
        flex-direction: row;
        flex-wrap: wrap;
      }

      ${ProductItemWrapper} {
        flex: 0 0 100%;
      }
    }

    @media (max-width: 767px) {
      flex: 0 0 100%;

      ${ProductItemWrapper} {
        flex: 0 0 100%;
      }
    }

    ${props =>
    props.viewType === 'grid' &&
    styled.css`

        ${ProductItemListContainer} {
          flex: 0 0 100%;
          flex-direction: row;
          flex-wrap: nowrap;
        }

        ${ImageWrapper} {
          width: 100%;
        }

        ${ProductItemWrapper} {
          margin-bottom: 0px;
          flex-direction: row;
          flex: 1;
          padding: 0 10px 0 0;
        }

        ${ProductItemsWrap} {
          flex: 1;
        }

        ${ProductItemButtonsPanel} {
          display: none;
        }
    `};

    ${props => props.singleProduct &&
    styled.css`
        ${ProductImageWrapper} {
          flex: 0 0 rem(180);
  
          @phone-or-smaller() {
            flex: 0 0 rem(136);
          }
        }
  
        ${ProductDetails} {
          flex: 1;
        }
      `}

    ${props =>
    props.viewType === 'grid' && !props.singleProduct &&
    styled.css`
      ${ProductImageWrapper} {
        flex: 0 0 100%;
        padding: 0;
      }

      ${ProductImageWrapper} {
        flex: 0 0 100%;

        @phone-or-smaller() {
          flex: 0 0 100%;
        }
      }

      @tablet-or-smaller() {
        ${ProductItemWrapper} {
          flex: 0 0 50%;
        }
      }

      ${ProductDetails} {
        display: none;
      }
    `}

  ${props => props.isSubscriptionItem && styled.css`
    ${ProductImageWrapper} {
      flex: 0 0 175px;
      background-color: #F0EFEB;
      display: flex;
      align-items: center;

      @media(max-width: 767px) {
       flex: 1;
       margin-bottom: rem(8)
      }
    }
  `}
  }
`

export { ProductItemListWrapper, ProductItemListContainer }