import { styled } from 'styleh-components'
import { Image } from 'atoms/Image'
import { StyledBaseText } from 'atoms/Text'
import { MaterialIcon } from 'atoms/MaterialIcon'

const StyledMaterialIcon = styled(MaterialIcon)`
  display: none;
  position: absolute;
  z-index: 100;
  cursor: pointer;
`
const StyledCloseIcon = styled(StyledMaterialIcon)`
  top: 10px;
  left: 10px;
`
const StyledExpandIcon = styled(StyledMaterialIcon)`
  top: 10px;
  right: 10px;
`
const StyledSwapIcon = styled(StyledMaterialIcon)`
  bottom: 10px;
  right: 10px;
`

const Wrapper = styled.div`
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &:hover {
    ${StyledCloseIcon}, ${StyledExpandIcon}, ${StyledSwapIcon} {
      display: block;
    }
  }
`

const ImageWrapper = styled.div`
  display: grid;
  grid-template-columns: auto auto auto;
`

const DetailsWrapper = styled.div``

const ProductImage = styled(Image)``

const ProductName = styled(StyledBaseText)`
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
`
const ProductPrice = styled(StyledBaseText)``

export {
  Wrapper,
  ImageWrapper,
  DetailsWrapper,
  ProductImage,
  ProductName,
  ProductPrice,
  StyledCloseIcon,
  StyledExpandIcon,
  StyledSwapIcon,
}