import { styled } from 'styleh-components'
import { borderLine } from 'src/styles'
import { H3 } from 'atoms/Text/Heading'
import {
  PaymentSummary,
  ProductItemList,
  PaymentMethodInfoPanel,
  StyledProductOrderSummary,
  ProductFacets,
  StyledProductItemId,
} from 'presets/Order'
import { ProductItemWrapper } from 'abstractions/Order/ProductItem'
import {
  PaymentSummaryPanelSectionLeft,
  PaymentSummaryPanelSectionRight,
  PaymentSummaryInfoPanel,
} from 'abstractions/Order/PaymentSummary'
import { InfoHeading } from 'presets/Order/PaymentSummary'
import { ProductOrderSummaryWrapper } from 'presets/ProductPieces/ProductOrderSummary'
import { StyledTitle } from 'presets/Address'
import { ApprovalStatus } from './ApprovalStatus'
import { UserComment } from './UserComment'

const StyledApprovalStatus = styled.withComponent(ApprovalStatus) `
  ${props =>
    props.isExpanded &&
    styled.css `
      &:after {
        ${borderLine};
      }
      svg {
        transform: rotate(180deg);
      }
    `}
`

const StyledPaymentSummary = styled.withComponent(PaymentSummary) `
  padding: rem(16) rem(16) rem(0);
  @phone-or-smaller() {
    padding: rem(16) rem(8) rem(0);
  }
  &:after {
    ${borderLine};
  }
  ${PaymentSummaryPanelSectionLeft} {
    flex: 0 0 40%;

    @phone-or-smaller() {
      flex: 0 0 100%;
    }
    ${PaymentSummaryInfoPanel} {
      &:last-child div{
        margin-bottom: 0;
      }
    }
  }
  ${PaymentSummaryPanelSectionRight} {
    flex: 0 0 calc(60% - 1rem);

    @tablet-or-smaller() {
      flex-direction: row;
    }

    @phone-or-smaller() {
      flex: 0 0 100%;
    }

    ${PaymentSummaryInfoPanel} {

      &:first-child {
        padding: 0;
        margin-bottom: 0;
        flex: 0 0 rem(180);

        @tablet-or-smaller() {
          flex: 0 0 100%;
          ${props =>
            props.isPurchaseOrder &&
            styled.css `
              display: none;
            `}
        }

        ${PaymentMethodInfoPanel} {
          padding-right: 16px;
          margin-bottom: rem(20);
          ${props =>
            props.isPurchaseOrder &&
            styled.css `
              display: none;
            `}
        }
      }
      &:last-child {
        flex: 1;
        padding: 0;
        ${StyledProductOrderSummary} {
          color: $colors-blackrabbit;
          margin-left: rem(40);
          ${props =>
            props.isPurchaseOrder &&
            styled.css `
              margin-left: 0;
            `}
          height: 100%;
          flex-direction: column;
          display: flex;
          @tablet-or-smaller() {
            margin-left: 0;
            flex: 0 0 100%;
          }

          .total-count {
            align-items: flex-end;
            flex: 1;
            margin-bottom: 0;
            color: $colors-black;
          }
        }
      }
    }
    ${ProductOrderSummaryWrapper} {
      max-width: none;
      width: auto;
    }
  }
  ${StyledTitle}, ${InfoHeading} {
    @tablet-or-smaller() {
      font-size: rem(18);
    }
    @phone-or-smaller() {
      font-size: rem(16);
    }
  }
  ${StyledProductOrderSummary} {
    ${H3}, .total-count {
      @phone-or-smaller() {
        font-size: rem(16);
      }
    }
  }
`

const StyledProductItemList = styled.withComponent(ProductItemList) `
  padding: rem(28) rem(16) rem(0);
  @phone-or-smaller() {
    padding: rem(28) rem(8) rem(0);
  }
  ${ProductItemWrapper} {
    padding-bottom: rem(68);

    &:last-child {
      padding-bottom: rem(32);
    }
  }
  @tablet-or-smaller() {
    ${ProductFacets}, ${StyledProductItemId} {
      font-size: rem(11);
    }
  }
`

const StyledUserComment = styled.withComponent(UserComment) ``

export {
  StyledApprovalStatus,
  StyledPaymentSummary,
  StyledProductItemList,
  StyledUserComment,
}