import { styled } from 'styleh-components'
import { H3 } from '@skava/ui/dist/components/atoms/Text/Heading'
import {
  DetailedList,
  DetailedListWrapper,
  DetailedListValue,
  DetailedListLabel,
  DetailedListItemPanel,
} from '@skava/ui/dist/components/molecules/DetailedList'
import {
  Button,
  ButtonText,
  ButtonIcon,
} from '@skava/ui/dist/components/atoms/Button'
import { wording } from '@skava/ui/dist/words'

const StyledDetailedList = styled(DetailedList) `
  display: flex;
  margin: 0;
  justify-content: center;
  flex-direction: column;
  flex: 1;

  ${H3} {
    display: none;
  }

  ${DetailedListItemPanel} {
    align-items: center;
    margin: 0;
    margin-bottom: rem(4);
    height: 24px;

    &.status-value {
      ${DetailedListValue} {
        color: var(--color-dark-green);
      }
    }

    @media (max-width: 1023px) {
      height: 16px;
    }

    @media (max-width: 767px) {
      height: 20px;
    }

    ${DetailedListLabel} {
      white-space: nowrap;
      ${props =>
        props.isSubscriptionItem &&
        styled.css `
          font-weight: 500;
          font-size: 16px;
        `}
    }

    ${DetailedListValue} {
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      ${props =>
        props.isSubscriptionItem &&
        styled.css `
          font-size: 16px;
        `}
    }
  }

  @media (max-width: 767px) {
    ${DetailedListItemPanel} {
      flex: 0 0 100%;
      flex-direction: row;
    }
  }

  .successShipment {
    ${DetailedListValue} {
      color: #009944;
    }
  }
  ${DetailedListValue} {
    margin: 0 0 0 5px;
    white-space: nowrap;
  }
  ${DetailedListLabel}, ${DetailedListValue} {
    position: relative;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--color-black);
    font-size: 20px;

    @media (max-width: 1023px) {
      font-size: 14px;
      line-height: 20px;
    }
  }
  ${DetailedListItemPanel}:nth-child (2) {
    ${DetailedListValue}:nth-child (2) {
      text-transform: none;
    }
  }
`

const StyledButton = styled(Button).attrs({
  'data-qa': 'qa-order-history-details',
}) `
  border: none;
  background: transparent;
  padding: 0;
  align-self: flex-start;
  font-size: 16px;

  &:before {
    content: '${wording.orderExpansionLabelDesktop}';
    ${props =>
      props.isSubscriptionItem &&
      styled.css `
    content: '${wording.expansionLabelDesktop}';
    `}
  }

  @phone-or-smaller() {
    font-size: 16px;
    &:before {
        content: '${wording.orderExpansionLabelMobile}';
        ${props =>
          props.isSubscriptionItem &&
          styled.css `
          content: '${wording.expansionLabelMobile}';
        `}
      }
    }
  ${ButtonIcon} {
    margin: 0;
  }

  ${ButtonText} {
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    margin-right: 8px;

    @media (max-width: 1023px) {
      font-size: 14px;
      margin-right: rem(4);
    }

    ${props =>
      props.isSubscriptionItem &&
      styled.css `
        font-weight: 400;
      `}
  }
`

export { StyledDetailedList, StyledButton }