import { styled } from 'styleh-components'
import Image, { ImageElement } from 'atoms/Image'
import Text from 'atoms/Text'
import Button from 'atoms/Button'
import Ratings, { TotalRatings } from 'molecules/Ratings'
import CartIcon from 'atoms/Icons/CartIcon'
import HeartIcon from 'atoms/Icons/HeartIcon'
import SelectDropDown from 'molecules/SelectDropDown'

const ProductItemWrapper = styled.div`
  width: 294px;
  padding: 10px;
  position: relative;
`
const ProductImage = styled.withComponent(Image) `
  height: 228px;
  background-color: #EFEFEF;

  ${ImageElement} {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
`
const ProductTitle = styled.withComponent(Text) `
  margin: 10px 0px;
  font-size: 1rem;
  color: #6D707F;
`
const ProductPricePanel = styled.div`
  display: flex;
  flex-direction: column;
`

const RegularPrice = styled.withComponent(Text) `
  text-decoration: line-through;
  color: grey;
`
const SalePrice = styled.withComponent(Text) `
  /* margin-left: 5px; */
  font-weight: bold;
`

const OfferLabel = styled.withComponent(Text) `
  color: red;
`
const StyledRatings = styled.withComponent(Ratings) `
  margin: 5px 0;
  ${TotalRatings} {
  }
`
const ButtonsPanel = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
`

const StyledHeartIcon = styled.withComponent(HeartIcon) `
`
const FavouriteButton = styled.withComponent(Button) `
  background-color: #159FD5;
  color: white;
  border: 0px;
  border-radius: 4px;
`
const StyledCartIcon = styled.withComponent(CartIcon) `
  svg {
    fill: white;
  }
`
const AddtoCartButton = styled.withComponent(Button) `
  background-color: #159FD5;
  color: white;
  border: 0px;
  border-radius: 4px;
`

const FacetsPanel = styled.div``
const StyledSelectDropDown = styled.withComponent(SelectDropDown) `
  margin-bottom: 10px;
`

export {
  ProductItemWrapper,
  ProductImage,
  ProductTitle,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ButtonsPanel,
  FavouriteButton,
  AddtoCartButton,
  OfferLabel,
  StyledCartIcon,
  StyledHeartIcon,
  FacetsPanel,
  StyledSelectDropDown,
}