import { styled } from 'styleh-components'
import AnimatedExpandableCard from 'presets/AnimatedExpandableCard'
import ActionButtonGroup from 'presets/Order/ActionButtonGroup'
import { PaymentSummaryWrapper } from '../Order/PaymentSummary'
import OrderStatus from './OrderStatus'
import ProductItem from './ProductItem'
import { StoreProductList } from './StoreProductList'

const StyledOrderStatus = styled(OrderStatus)`
  border-bottom: 1px solid var(--color-light-grey);
  padding-bottom: 20px;
`
const StyledProductItem = styled(ProductItem)`
  padding: 20px 0px;
`

const StyledStoreProductList = styled(StoreProductList) ``

const PaymentSummaryContainer = styled.div`
  display: flex;
  padding: 20px 0px;
  @media (min-width: 768px) {
    border-bottom: 1px solid var(--color-light-grey);
  }

  ${PaymentSummaryWrapper} {
    flex: 1;
  }
`

const StyledActionButtonGroup = styled(ActionButtonGroup)`
  ${props =>
    props.isExpand &&
    styled.css`
      display: none;
    `}
`

const FooterContainer = styled.div`
   ${(props: {isExpanded: boolean}) =>
    props.isExpanded === false &&
    styled.css`
      padding: rem(24) rem(16) rem(16);
    `}
`

const StyledAnimatedExpandableCard = styled(AnimatedExpandableCard).attrs({
  'data-qa': 'qa-order',
})``

export {
  StyledOrderStatus,
  StyledProductItem,
  PaymentSummaryContainer,
  FooterContainer,
  StyledStoreProductList,
  StyledActionButtonGroup,
  StyledAnimatedExpandableCard,
}