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

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

const StyledPhysicalAddress = styled(PhysicalAddress)`
  flex: 0 0 30%;
`

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: 0 0 33.33%;
          padding: 0 10px 0 0;

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

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

        ${ProductItemsWrap} {
          flex: 1;
        }

        ${StyledPhysicalAddress} {
          display: none;
        }

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

    ${props =>
      props.singleProduct &&
      styled.css`
        ${ProductImageWrapper} {
          flex: 0 0 rem(180);

          @phone-or-smaller() {
            flex: 0 0 rem(136);
          }
        }
        ${StyledPhysicalAddress} {
          display: none;
        }
        ${ProductItemWrapper} {
          flex: 1;
        }
        ${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: var(--color-white-grey);
        display: flex;
        align-items: center;

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

export {
  ProductItemListWrapper,
  ProductItemListContainer,
  StyledPhysicalAddress,
}