import { styled } from 'styleh-components'
import Image, { ImageElement } from 'atoms/Image'
import Text from 'atoms/Text'
import Ratings, { TotalRatings } from 'molecules/Ratings'

const ProductItemWrapper = styled.div`
  width: ${props => (props.imageWidth ? props.imageWidth : '100%')};
  padding: 10px;
  position: relative;
`
const ProductImage = styled.withComponent(Image)`
  height: ${props => props.imageHeight};
  width: 100%;
  background-color: #EFEFEF;
  ${props =>
    props.isDisableProductImage &&
    styled.css`
      display: none;
    `};

  ${ImageElement} {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    max-width: 100%;
    max-height:100%;
  }
`
const StyledProductTitle = styled.withComponent(Text)`
  margin: 5px 0px;
  font-size: 1rem;
  color: #6D707F;
`
const ProductDescription = styled.withComponent(Text)`
  margin: 5px 0px;
  font-size: 1rem;
  color: #6D707F;
`
const ProductBrand = styled.withComponent(Text)`
  margin: 10px 0px;
  font-size: 1rem;
  color: #000;
  font-weight: bold;
`
const ProductPricePanel = styled.div`
  display: flex;
  flex-direction: row;
`

const RegularPrice = styled.withComponent(Text)`
  text-decoration: line-through;
  padding-left: rem(4);
  color: grey;
`
const SalePrice = styled.withComponent(Text)`
  font-weight: bold;
`

const StyledRatings = styled.withComponent(Ratings)`
  margin: 5px 0;
`
const ProductInfoWrapper = styled.div`
  ${props =>
    props.isDisableProductInformation &&
    styled.css`
      display: none;
    `};
`

export {
  ProductItemWrapper,
  ProductImage,
  StyledProductTitle,
  ProductBrand,
  ProductDescription,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ProductInfoWrapper,
}