import { styled } from 'styleh-components'
import {
  Order,
  PaymentSummaryContainer,
  FooterContainer,
} from 'abstractions/Order'
import {
  PaymentSummaryPanelSectionLeft,
  PaymentSummaryPanelSectionRight,
  PaymentSummaryPanel,
  StyledActionButtonGroup
} from 'abstractions/Order/PaymentSummary'
import { ProductItemWrapper, ProductImageWrapper, ProductDetails } from 'abstractions/Order/ProductItem'
import { PaymentSummary, StyledProductOrderSummary } from './PaymentSummary'
import ProductItemList from './ProductItemList'
import ActionButtonGroup, { SectionWrapper, PrintButton, OrderAgainButton, ReturnButton } from './ActionButtonGroup'
import OrderStatus from './OrderStatus'
import { PrimaryButton, SecondaryButton } from 'presets/Buttons'

const StyledPaymentSummary = PaymentSummary

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)`
  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(min-width: 769px) and (max-width: 1023px) {
    flex: 0 0 65%;
  } */
  @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(min-width: 769px) and (max-width: 1023px) {
          flex: 0 0 35%;
        } */
        @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)`
  margin-bottom: rem(16);
`

const StyledSecondaryButton = styled.withComponent(SecondaryButton)`
  margin-bottom: rem(16);
`

export {
  StyledOrderStatus,
  StyledPaymentSummary,
  StyledProductItemList,
  StyledOrder,
  StyledPrimaryButton,
  StyledSecondaryButton,
}