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'

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

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.withComponent(ActionButtonGroup)`
  ${props =>
    props.isExpand &&
    styled.css`
      display: none;
    `}
`

const FooterContainer = styled.div``

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

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