import { styled } from 'styleh-components'
import { media } from '@skava/styleh-toolset'
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(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(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(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;
    ${media.phoneOrSmaller `
    flex-direction: column;
    align-items: normal;
  `}

    ${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(PrintButton).attrs({
  dataQa: 'qa-track-package',
}) `
  margin-bottom: rem(16);
`

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

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