import { styled } from 'styleh-components'
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'
import { StyledBaseText } from 'atoms/Text'
import {
  DetailedList,
  DetailedListLabel,
  DetailedListValue,
  DetailedListItemPanel,
} from 'molecules/DetailedList'

const StyledButtonWithIcon = styled.withComponent(Button) `
  background: transparent;
  border: 0;
  padding: 0;
  justify-content: flex-end;
  @tablet-or-larger() {
    padding-right: rem(16);
  }
  @desktop-or-larger() {
    padding-right: rem(8);
  }

  ${ButtonLabel} {
    color: var(--color-blue);
    font-size: rem(18);
    text-transform: capitalize;
    margin: 0;
    font-weight: 500;

    @tablet-or-smaller() {
      font-size: rem(14);
    }
  }

  ${ButtonIcon} {
    margin: 0;
    @desktop-or-larger() {
      padding-left: rem(8);
    }
  }
`
const HeadingWrapper = styled.div `
  display: flex;
  flex-direction: row;

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

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

const StyledText = StyledBaseText.as('span')

const StyledHeadingText = styled.withComponent(StyledText) `
  font-weight: bold;
  font-size: rem(20);
  color: var(--color-black);
  margin-bottom: rem(8);

  @tablet-or-smaller() {
    font-size: rem(16);
  }

  @phone-or-smaller() {
    font-size: rem(14);
  }
`

const StyledHeadingValue = styled.withComponent(StyledHeadingText) `
  margin-left: rem(20);

  @tablet-or-smaller() {
    margin-left: 0;
  }
`
const UserInformationHeadingLabel = styled.withComponent(StyledHeadingText) `
  width: 50px;
  @tablet-or-smaller() {
    width: rem(60);
  }
`
const OrderInformationHeadingLabel = styled.withComponent(StyledHeadingText) `
  width: rem(150);
  &:after {
    content: '${props => props.isDesktop}:';
  }
  @tablet-or-smaller() {
    &:after {
      content: '${props => props.isTabletOrMobile}:';
    }
  }
`

const DetailedListStyles = styled.css `
  ${DetailedListItemPanel} {
    margin-top: 0;
    margin-bottom: rem(4);

    &.enable-bold {
      font-weight: 700;
    }
    &.enable-blue {
      ${DetailedListValue} {
        color: var(--color-blue);
      }
    }
    &.enable-green {
      ${DetailedListValue} {
        color: var(--color-dark-green);
        font-weight: 700;
      }
    }

    @phone-or-smaller() {
      flex-direction: row;
    }
  }
  ${DetailedListLabel}, ${DetailedListValue} {
    text-transform: capitalize;
    font-size: rem(16);
    color: var(--color-black);

    @tablet-or-smaller() {
      font-size: rem(16);
    }

    @phone-or-smaller() {
      font-size: rem(14);
    }
  }
  ${DetailedListValue} {
    width: rem(180);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-left: rem(20);

    @phone-or-smaller() {
      width: rem(185);
    }

    @tablet-or-smaller() {
      margin: 0;
      width: rem(128);
    }
  }
`

const StyledDetailedlistRequest = styled.withComponent(DetailedList) `
  ${DetailedListStyles};

  ${DetailedListValue} {
    @tablet-or-smaller() {
      width: rem(75);
    }
  }
`
const StyledDetailedlist = styled.withComponent(DetailedList) `
  ${DetailedListStyles};

  ${DetailedListValue} {
    @tablet-or-smaller() {
      width: rem(144);
    }
  }
`
const StyledOrderInformation = styled.div `
  ${StyledDetailedlist}, ${StyledDetailedlistRequest} {
    ${DetailedListItemPanel} {
      @tablet-or-smaller() {
        justify-content: space-between;
        ${DetailedListValue} {
          text-align: right;
        }
      }
      @phone-or-smaller() {
        justify-content: flex-start;
        ${DetailedListValue} {
          text-align: left;
        }
      }
      ${DetailedListLabel} {
        width: rem(160);
      }
    }
  }

  ${StyledDetailedlistRequest} {
    ${DetailedListItemPanel} {
      ${DetailedListLabel} {
        width: rem(150);
      }
    }
  }
`
const StyledUserInformation = styled.div `
  ${StyledDetailedlist}, ${StyledDetailedlistRequest} {
    ${DetailedListLabel} {
      width: rem(50);
      @tablet-or-smaller() {
        width: rem(60);
      }
    }
  }
`
const UserInformationList = styled.div `
  display: flex;
  @phone-or-smaller() {
    font-size: 14px;
  }
`

const UserInformationLabel = styled.span `
  width: 3.125rem;
`

const UserNameValue = styled.span `
  margin-left: rem(20);
  color: var(--color-blue);
  @tablet-or-smaller() {
    margin-left: rem(8);
  }
`

export {
  UserInformationLabel,
  StyledButtonWithIcon,
  StyledDetailedlist,
  StyledDetailedlistRequest,
  StyledUserInformation,
  StyledOrderInformation,
  HeadingWrapper,
  UserInformationHeadingLabel,
  OrderInformationHeadingLabel,
  StyledHeadingValue,
  UserInformationList,
  UserNameValue,
}