import { styled } from 'uxui-modules/view-container'
import {
  Order,
  PaymentSummaryContainer,
  FooterContainer,
} from 'abstractions/Order'
import ActionButtonGroup, { SectionWrapper } from './ActionButtonGroup'
import PaymentSummary from './PaymentSummary'
import OrderStatus from './OrderStatus'
import ProductItemList from './ProductItemList'
import styled from 'uxui-modules/view-container/styles/styled-components/typings';

const StyledPaymentSummary = PaymentSummary

const StyledOrderStatus = styled.withComponent(OrderStatus)`
  border-bottom: 1px solid #ccc;
  padding: rem(16);

  ${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.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%;
      `}
  }
`

const StyledOrder = styled.withComponent(Order)`
  ${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);
      }
    }

    @media(max-width: 767px) {
      ${StyledProductItemList}, ${SectionWrapper} {
        flex: 0 0 100%;
      }
    }
  }
  ${PaymentSummaryContainer} {
    padding: 16px 16px 0;

    @media (max-width: 767px) {
      padding: 16px 8px 0px;
    }
  }
`

export {
  StyledOrderStatus,
  StyledPaymentSummary,
  StyledProductItemList,
  StyledOrder,
}