import { styled } from 'styleh-components'
import { AnimatedExpandableCard } from 'presets/AnimatedExpandableCard'
import {
  TextPlaceholder,
  SquarePlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'

const StyledButtonPlaceHolder = styled.withComponent(RectanglePlaceholder)``

const StyledTextPlaceholder = styled.withComponent(TextPlaceholder)`
  margin-right: rem(24);
  width: rem(100);
  @phone-or-smaller() {
    width: rem(50);
    margin-right: rem(16);
  }
`

const StyledNamePlaceHolder = styled.withComponent(TextPlaceholder)`
  margin-right: rem(24);
  @tablet-or-smaller() {
    margin-bottom: rem(8);
    margin-right: 0;
  }
`

const StyledRectanglePlaceholder = styled.withComponent(RectanglePlaceholder)`
  border-radius: 25%;
`

const StyledSquarePlaceholder = styled.withComponent(SquarePlaceholder)`
  margin-right: rem(54);
  &:first-child {
    margin-right: rem(24);
  }
  @phone-or-smaller() {
    margin-right: rem(32);
    &:first-child {
      margin-right: rem(16);
    }
  }
`

const StyledButtonWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  ${StyledTextPlaceholder} {
    margin-bottom: 0;
  }
`

const ActionBarWrapper = styled.div`
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: rem(8);

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

  ${(props: { isConfirming: boolean }) =>
    props.isConfirming === true &&
    styled.css`
      flex: 1;
      justify-content: space-between;
      @tablet-or-smaller() {
        margin-right: 0;
      }
    `};
`

const HeaderWrapper = styled.section`
  display: flex;
  flex-direction: row;
  margin-bottom: rem(8);
  height: rem(52);
  padding-bottom: rem(8);
  @desktop-or-larger() {
    ${(props: { isConfirming: boolean; isExpanded: boolean }) =>
      props.isExpanded === true &&
      props.isConfirming === true &&
      styled.css`
        border-bottom: 1px solid #d7d7d7;
      `};
  }

  @tablet-or-smaller() {
    height: rem(82);
    flex-wrap: wrap;
  }
  @phone-or-smaller() {
    height: auto;
  }
`

const StyledAnimatedExpandableCard = styled
  .withComponent(AnimatedExpandableCard)
  .attrs({
    'data-qa': 'qa-list-container',
  })`
  overflow: visible;
  margin-bottom: rem(8);
  @phone-or-smaller() {
    margin-bottom: rem(16);
  }
`

export {
  StyledNamePlaceHolder,
  StyledTextPlaceholder,
  StyledSquarePlaceholder,
  StyledRectanglePlaceholder,
  StyledButtonWrapper,
  HeaderWrapper,
  ActionBarWrapper,
  StyledAnimatedExpandableCard,
  StyledButtonPlaceHolder,
}