import { styled } from 'styleh-components'
import { borderLine } from 'src/styles'
import {
  ProductItemList,
  PaymentSummary,
  PaymentOrderSummary,
} from 'abstractions/Order'
import {
  PaymentSummaryPanelSectionLeft,
  PaymentSummaryPanelSectionRight,
} from 'abstractions/Order/PaymentSummary'
import ApprovalStatus from './ApprovalStatus'
import UserComment from './UserComment'

const StyledApprovalStatus = styled.withComponent(ApprovalStatus) `
  ${props =>
    props.isExpanded &&
    styled.css `
      &:after {
        ${borderLine};
      }
    `}
`
const StyledPaymentSummary = styled.withComponent(PaymentSummary) `
  &:after {
    ${borderLine}
  }
  padding-top: 20px;

  ${PaymentOrderSummary} {
    max-width: none;
  }

  ${PaymentSummaryPanelSectionLeft} {
    flex: 0 0 40%;
  }
  ${PaymentSummaryPanelSectionRight} {
    flex: 0 0 60%;
  }
`
const StyledProductItemList = styled.withComponent(ProductItemList) `
  padding-top: 28px;
`

const StyledUserComment = styled.withComponent(UserComment) ``

export {
  StyledApprovalStatus,
  StyledPaymentSummary,
  StyledProductItemList,
  StyledUserComment,
}