import { styled } from 'styleh-components'
import { borderLine } from '@skava/ui/dist/styles'
import {
  CirclePlaceholder,
  TextPlaceholder,
  RectanglePlaceholder,
  ParagraphPlaceholder,
  ListPlaceholder,
  ListWrapper,
  ItemPanel,
} from '@skava/ui/dist/components/atoms/Placeholder'

const StyledHeading = styled(TextPlaceholder) `
  margin-bottom: rem(8);
`
const FrequencyWrapper = styled.div `
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: rem(24);
  padding-bottom: rem(24);

  @phone-or-smaller() {
    padding-top: rem(16);
    padding-bottom: rem(16);
  }

  &:after {
    ${borderLine};
    background: var(--color-dark-grey);
  }
`
const ProductQuantityWrapper = styled.div `
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: rem(24);
  padding-bottom: rem(24);

  @phone-or-smaller() {
    padding-top: rem(16);
    padding-bottom: rem(16);
  }

  &:after {
    ${borderLine};
    background: var(--color-dark-grey);
  }
`
const ProductOptions = styled.div `
  ${ListWrapper} {
    flex-direction: row;
    ${ItemPanel} {
      margin-right: rem(16);
      &:last-child {
        margin-right: 0;
      }
    }
  }
`
const StyledRectangularPlaceholder = styled(RectanglePlaceholder) `
  margin-right: rem(8);
`
const ProductOptionsWrapper = styled.div `
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: rem(24);

  @phone-or-smaller() {
    padding-top: rem(16);
  }

  &:after {
    ${borderLine};
    background: var(--color-dark-grey);
  }

  @tablet-or-smaller() {
    width: 100%;
  }
`
const Details = styled(ParagraphPlaceholder) `
  margin-bottom: rem(24);
`
const ProductDetailsWrapper = styled.div `
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: rem(24);
  padding-bottom: rem(24);

  @phone-or-smaller() {
    padding-top: rem(16);
    padding-bottom: rem(16);
  }

  &:after {
    ${borderLine};
    background: var(--color-dark-grey);
  }
`
const ProductPrice = styled(TextPlaceholder) ``

const StyledProductInfo = styled(TextPlaceholder) `
  margin-bottom: rem(8);
`
const ProductSkuIdWrapper = styled.div `
  display: flex;
  flex-direction: row;
  padding-bottom: rem(16);
`
const ProductInformationWrapper = styled.div `
  position: relative;
  padding-bottom: rem(24);

  @phone-or-smaller() {
    padding-bottom: rem(16);
  }

  &:after {
    ${borderLine};
    background: var(--color-dark-grey);
  }
`
const Wrapper = styled.section `
  display: flex;
  flex-direction: column;
  width: 100%;
`

export {
  StyledHeading,
  FrequencyWrapper,
  ProductQuantityWrapper,
  StyledRectangularPlaceholder,
  ProductOptions,
  ProductOptionsWrapper,
  Details,
  ProductDetailsWrapper,
  ProductPrice,
  StyledProductInfo,
  ProductSkuIdWrapper,
  ProductInformationWrapper,
  Wrapper,
}