import { styled } from 'styleh-components'
import { PaymentSummaryInfoPanel } from 'abstractions/Order/PaymentSummary'
import { Heading, H3 } from 'atoms/Text/Heading'
import Text from 'atoms/Text'
import { ButtonLabel } from 'atoms/Button'
import { ProductOrderSummary } from 'presets/ProductPieces/ProductOrderSummary'
import { Address, StyledTitle, StyledAddress } from 'presets/Address'
import {
  DetailedList,
  DetailedListWrapper,
  DetailedListValue,
  DetailedListLabel,
  DetailedListItemPanel,
} from 'molecules/DetailedList'
import { ActionButtonGroup, SectionWrapper } from '../ActionButtonGroup'

// @note - all fonts are roboto
// font-family: "Roboto";
const InfoHeading = styled.withComponent(Heading)`
  margin: 0;
  padding: 0 0 8px 0;
  font-size: 20px;
  color: var(--color-black);
  ${props => props.isSubscriptionItem && styled.css`
    font-size: 14px;
  `}

  @media(max-width: 767px) {
    font-size: 18px;
  }
`

// @note - all fonts are roboto
// font-family: "Roboto";
const InfoDec = styled.withComponent(Text)`
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  color: var(--color-black);
  ${props => props.isSubscriptionItem && styled.css`
    font-size: 14px;
  `}
`

const AddressInfoPanel = styled.div.attrs({
  'data-qa': 'qa-order-shipping-address',
})`

  ${props => props.isSubscriptionItem && styled.css`
    ${StyledTitle} {
      font-size: 14px;
    }
    ${StyledAddress} {
      font-size: 14px;
    }
  `}
`
const ShippingMethodInfoPanel = styled
  .withComponent(PaymentSummaryInfoPanel)
  .attrs({
    'data-qa': 'qa-order-shipping-methods',
  })`
  ${props => props.isSubscriptionItem && styled.css`
    margin-bottom: 0px;
  `}
`
const PaymentMethodInfoPanel = styled
  .withComponent(PaymentSummaryInfoPanel)
  .attrs({
    'data-qa': 'qa-order-history-payment',
  })`
  ${props => props.isSubscriptionItem && styled.css`
    margin-bottom: 4px;
  `}
`

const StyledProductOrderSummary = styled.withComponent(ProductOrderSummary)`
  ${props => props.isSubscriptionItem && styled.css`
      ${H3} {
        font-size: 14px;
      }
      ${DetailedListLabel} {
        font-size: 14px;
      }
      ${DetailedListValue} {
        display: none;
      }
  `}
`

// @note - all fonts are roboto
// font-family: "Roboto";
export {
  InfoHeading,
  InfoDec,
  AddressInfoPanel,
  ShippingMethodInfoPanel,
  PaymentMethodInfoPanel,
  StyledProductOrderSummary,
}