import { styled } from 'styleh-components'
import { media } from '@skava/styleh-toolset'
import {
  RectanglePlaceholder,
  TextPlaceholder,
  ImagePlaceholder,
} from '@skava/ui/dist/components/atoms/Placeholder'
import { Address } from 'abstractions/Address'
import { FlexRow, FlexColumn } from '../styled'

const ItemPlaceholder = styled(TextPlaceholder) `
  margin-bottom: rem(4);
`
const StyledDetailedList = styled(FlexColumn) `
  margin: rem(8) 0;
`
const StyledImagePlaceholder = styled(ImagePlaceholder) `
  width: rem(160);
  height: rem(125);
`
const StyledAddress = styled(Address) `
  margin-bottom: rem(16);
`
const StyledHeading = styled(TextPlaceholder) `
  margin-bottom: rem(16);
`
const StyledValue = styled(TextPlaceholder) `
  margin-right: rem(8);
`
const StyledActionButton = styled(RectanglePlaceholder) `
  margin-bottom: rem(8);
  &:last-child {
    margin-bottom: 0;
  }
`
const ProductDetailsWrapper = styled(FlexColumn) `
  margin-left: rem(16);
`
const ActionButtonWrapper = styled(FlexColumn) `
  flex: 0 0 25%;
  align-items: flex-end;
  ${media.desktopOrSmaller `
    order: 1;
  `}

  ${media.phoneOrSmaller `
    order: 2;
    flex: 1 0 100%;
  `}
`
const ShippingWrapper = styled(FlexRow) `
  flex: ${props => (props.isVisible === true ? 1 : '0 0 25%')};
  align-items: flex-start;
  flex-wrap: wrap;
  ${media.tabletOrSmaller `
    margin-left: rem(150);
    flex: 0 0 calc(75% - rem(150));
    order: 2;
  `}
  ${media.phoneOrSmaller `
    margin-left: 0;
    flex: 1 0 100%;
    padding: rem(20) 0 rem(16) 0 ;
    order: 1;
  `}
`
const ProductItemWrapper = styled(FlexRow) `
  flex: 0 0 50%;
  order: 0;
  ${media.tabletOrSmaller `
    flex: 0 0 75%;
  `}
`
const OrderItemWrapper = styled.div.attrs({
  'data-qa': 'qa-ordered-product-item-container',
}) `
  padding: rem(24) 0;
  ${media.tabletOrSmaller `
    flex-wrap: wrap;
    align-items: flex-start;
  `}
  ${media.phoneOrSmaller `
    display: block;
  `}
`
const ItemContainer = styled(FlexRow) `
  flex: 0 0 100%;
  flex-wrap: wrap;
  margin-bottom: rem(24);

  &: last-child {
    margin-bottom: 0;
  }
`
const StatusWrapper = styled(FlexRow) `
  flex-wrap: wrap;
  margin-bottom: rem(16);
  align-items: center;

  ${media.phoneOrSmaller `
    flex: 1 0 100%;
  `}
`

export {
  ProductDetailsWrapper,
  ItemPlaceholder,
  StyledDetailedList,
  StyledImagePlaceholder,
  StyledAddress,
  StyledHeading,
  StyledValue,
  StyledActionButton,
  ActionButtonWrapper,
  ShippingWrapper,
  ProductItemWrapper,
  OrderItemWrapper,
  ItemContainer,
  StatusWrapper,
}