import { styled } from 'styleh-components'
import { TextPlaceholder, RectanglePlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { ProductItemList } from '../ProductItemList'

const StyledPlaceHolderIcon = styled(RectanglePlaceholder)``

const StyledPlaceHolderText = styled(TextPlaceholder)``

const HeaderWrapper = styled.div``

const StyledProductItemList = styled(ProductItemList)`
  flex: 1;
`

const StoreItemWrapper = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  ${(props: {viewType?: string}) => props.viewType === 'list' && styled.css `
    border-bottom: 1px solid var(--color-light-grey);
    &:last-of-type {
      border-bottom: none;
    }
  `}
`

const StoreProductListWrapper = styled.section `
  display: flex;
  flex-direction: column;
  flex: 1;
  ${(props: {hasSingleItem: boolean; viewType?: string}) =>
    props.hasSingleItem === false && styled.css `
      overflow-x: auto;
  `}
  ${(props: {hasSingleItem: boolean; viewType?: string}) =>
    props.viewType === 'grid' && styled.css `
      flex-direction: row;
      ${StoreItemWrapper} {
        flex-direction: row;
      }
    `}
`

export {
  StoreProductListWrapper,
  StyledPlaceHolderIcon,
  StyledPlaceHolderText,
  HeaderWrapper,
  StoreItemWrapper,
  StyledProductItemList,
}