import { styled } from 'styleh-components'
import { TextPlaceholder } from 'atoms/Placeholder'
import { ActionButtonGroup } from 'presets/Order/ActionButtonGroup'

/* OrderItem - Paymeny summary Section */
const OrderRightSection = styled.div`
  position: relative;
  flex: 1;
  display: flex;
  justify-content: flex-end;
`

const OrderLeftSection = styled.div`
  position: relative;
  flex: 0 0 50%;
  display: flex;
  justify-content: flex-start;
`

const PaymentSummaryRow = styled.div`
  position: relative;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
`

const PaymentOrderSummary = styled.section`
  position: relative;
  max-width: 300px;
`

const PaymentSummaryInfoPanel = styled.div`
  position: relative;
  margin-bottom: 20px;
  padding-right: 16px;
  @phone-or-smaller() {
    padding-right: 0;
  }
`

const PaymentSummaryContent = styled.div`
  position: relative;
  flex: 0 0 50%;
`

const PaymentSummaryPanel = styled.div`
  position: relative;
  flex: 0 0 70%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const PaymentSummaryPanelSectionLeft = styled.div`
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  @media (max-width: 767px) {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
    ${PaymentSummaryInfoPanel} {
      flex: 0 0 100%;
    }
  }
`

const PaymentSummaryPanelSectionRight = styled.div`
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const StyledActionButtonGroup = styled.withComponent(ActionButtonGroup)`
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  /* @media screen and (min-width: 768px) and (max-width: 1023px) {
    display: none;
  } */

  @phone-or-smaller() {
    border-top: 1px solid #a6afc1;
    padding-top: rem(24);
    flex: 0 0 100%;
  }
`

const PrintButton = styled.div`
  width: 160px;
  margin-bottom: 15px;
  border-radius: 4px;
  @media (max-width: 767px) {
    width: 100%;
  }
`
const OrderAgainButton = styled.div`
  width: 160px;
  margin-bottom: 15px;
  border-radius: 4px;
  @media (max-width: 767px) {
    width: 100%;
  }
`
const ReturnButton = styled.div`
  width: 160px;
  margin-bottom: 15px;
  border-radius: 4px;
  @media (max-width: 767px) {
    width: 100%;
  }
`

const TextPlaceholderItem = styled.withComponent(TextPlaceholder)`
  margin-bottom: 15px;
`

const PaymentSummaryWrapper = styled.section`
  position: relative;
  display: flex;
  flex-wrap: wrap;

  @media (max-width: 767px) {
    flex-direction: row;
  }

  ${props =>
    props.shouldHideActionButtons === true &&
    styled.css`
      ${StyledActionButtonGroup} {
        display: none;
      }
      ${PaymentSummaryPanel} {
        flex: 0 0 100%;
      }
      ${PaymentSummaryPanelSectionLeft} {
        flex: 0 0 33.33%;

        @media (max-width: 1023px) {
          flex: 0 0 50%;
        }
        @media (max-width: 767px) {
          flex: 0 0 100%;
          ${PaymentSummaryInfoPanel} {
            flex: 0 0 100%;
          }
        }
      }
      ${PaymentSummaryPanelSectionRight} {
        flex: 0 0 66.67%;
        flex-direction: row;

        @media (max-width: 1023px) {
          flex: 0 0 50%;
        }
        ${PaymentSummaryInfoPanel} {
          flex: 0 0 50%;
          @media (max-width: 1023px) {
            flex: 0 0 100%;
          }
        }
        @media (max-width: 767px) {
          flex: 0 0 100%;
        }
      }
    `};
`

export {
  PaymentSummaryWrapper,
  PaymentSummaryPanel,
  PaymentSummaryContent,
  PaymentSummaryInfoPanel,
  PaymentOrderSummary,
  PaymentSummaryRow,
  OrderLeftSection,
  OrderRightSection,
  PaymentSummaryPanelSectionLeft,
  PaymentSummaryPanelSectionRight,
  StyledActionButtonGroup,
  PrintButton,
  OrderAgainButton,
  ReturnButton,
  TextPlaceholderItem,
}