import { styled } from 'styleh-components'
import {
Order,
PaymentSummaryContainer,
FooterContainer,
} from 'abstractions/Order'
import {
PaymentSummaryPanelSectionLeft,
PaymentSummaryPanelSectionRight,
PaymentSummaryPanel,
StyledActionButtonGroup,
PaymentSummaryInfoPanel,
} from 'abstractions/Order/PaymentSummary'
import {
ProductItemWrapper,
ProductImageWrapper,
ProductDetails,
} from 'abstractions/Order/ProductItem'
import { PrimaryButton, SecondaryButton } from 'presets/Buttons'
import { PaymentSummary, StyledProductOrderSummary } from './PaymentSummary'
import ProductItemList from './ProductItemList'
import {
SectionWrapper,
PrintButton,
OrderAgainButton,
ReturnButton,
} from './ActionButtonGroup'
import OrderStatus from './OrderStatus'
const StyledPaymentSummary = styled(PaymentSummary)`
${props =>
props.singleProduct &&
styled.css`
${SectionWrapper} {
display: none;
}
${PaymentSummaryPanel} {
flex: 0 0 100%;
}
${PaymentSummaryPanelSectionLeft} {
flex: 0 0 33.33%;
@phone-or-smaller() {
flex: 0 0 100%;
}
}
${PaymentSummaryPanelSectionRight} {
flex: 1;
flex-direction: row;
justify-content: space-between;
@phone-or-smaller() {
flex: 0 0 100%;
${PaymentSummaryInfoPanel} {
flex: 0 0 100%;
}
}
}
`};
}
`
const StyledOrderStatus = styled.withComponent(OrderStatus)`
border-bottom: 1px solid #ccc;
padding: rem(16);
@phone-or-smaller() {
padding: rem(16) rem(8);
}
${props =>
props.state.isExpanded &&
styled.css`
svg {
transform: rotate(180deg);
}
`}
`
const StyledProductItemList = styled.withComponent(ProductItemList).attrs({
dataQa: 'qa-ordered-product-item-container',
})`
padding-bottom: rem(16);
flex: 0 0 60%;
${props =>
props.isSubscriptionItem &&
styled.css`
${ProductItemWrapper} {
flex: 1;
}
${ProductDetails} {
flex: 1;
}
${PrintButton}, ${OrderAgainButton}, ${ReturnButton} {
width: rem(250);
}
`}
${props =>
props.isSubscriptionItem &&
props.state.isExpanded &&
styled.css`
${PrintButton}, ${OrderAgainButton}, ${ReturnButton} {
width: 100%;
}
`}
${props =>
props.state.isExpanded &&
styled.css`
flex: 0 0 100%;
`}
@media(min-width: 768px) and(max-width: 1023px) {
flex: 0 0 60%;
${props =>
props.state.isExpanded &&
styled.css`
flex: 0 0 100%;
`}
}
${props =>
props.isSubscriptionItem &&
styled.css`
@media (max-width: 768px) {
flex: 0 0 100%;
}
`}
`
const StyledOrder = styled.withComponent(Order)`
${props =>
props.isSubscriptionItem &&
styled.css`
${PaymentSummaryPanelSectionLeft}, ${PaymentSummaryPanelSectionRight} {
flex: 0 0 100%;
}
${PaymentSummaryPanel} {
flex: 0 0 100%;
}
${StyledActionButtonGroup} {
display: none;
}
${StyledProductOrderSummary} {
border-top: solid 1px #ccc;
max-width: 100%;
padding-top: rem(16);
@media (max-width: 768px) {
width: 100%;
}
}
`}
${FooterContainer} {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
padding: rem(24) rem(16) rem(16);
${SectionWrapper} {
flex: 0 0 40%;
flex-direction: column;
justify-content: flex-end;
@phone-or-smaller() {
padding-top: rem(24);
}
${props =>
props.isSubscriptionItem &&
styled.css`
@media (max-width: 768px) {
flex: 0 0 100%;
flex-direction: row;
justify-content: flex-start;
}
`}
}
@phone-or-smaller() {
${StyledProductItemList}, ${SectionWrapper} {
flex: 0 0 100%;
}
}
}
${PaymentSummaryContainer} {
padding: rem(16) rem(16) 0;
@phone-or-smaller() {
padding: rem(16) rem(8) 0;
}
}
`
const StyledPrimaryButton = styled.withComponent(PrintButton).attrs({
dataQa: 'qa-track-package',
})`
margin-bottom: rem(16);
`
const StyledSecondaryButton = styled.withComponent(SecondaryButton)`
margin-bottom: rem(16);
`
export {
StyledOrderStatus,
StyledPaymentSummary,
StyledProductItemList,
StyledOrder,
StyledPrimaryButton,
StyledSecondaryButton,
}