import React from 'react'
import { styled } from 'view-container'
import { ClickBoundary } from 'features/ClickBoundary'
import { OptionList } from '../OptionList'
import { disabledStyles } from '../meta/_styled'

const ClickBoundaryAdapter = props => (
  <ClickBoundary
    {...props}
    className={`select-dropdown-wrap ${props.className}`}
  />
)

// @todo
// ${ArrowIcon} {
//   fill: lightgray;
// }

export const StyledOptionList = styled.withComponent(OptionList)`

  /* todo - dropdown absolute positioning top/bottom */
  ${props =>
    props.shouldBeAbsolute &&
    styled.css`
      position: absolute;
      z-index: 1;
      margin-left: -1px;
      width: calc(100% + 2px);
      left: 0;
      top: 95%;
    `};

  ${props =>
    props.dropDownAlignmentType === 'top' &&
    props.shouldBeAbsolute &&
    styled.css`
      bottom: 95%;
      top: auto;
    `};

  /* todo - dropdown border settings */
  ${props =>
    props.isVisible === true &&
    props.shouldBeAbsolute &&
    styled.css`
      border-radius: 0 0 $border-radius $border-radius;
      border: $border-thin;
      border-top: 0;
    `};

  ${props =>
    props.isVisible === true &&
    props.dropDownAlignmentType === 'top' &&
    props.shouldBeAbsolute &&
    styled.css`
      border-top: inherit;
      border-bottom: 0;
      border-radius: $border-radius $border-radius 0 0;
    `};

`

/**
 * @todo @fixme not sure why self attribute selectors do not work -.-
 * @todo use {Option} { color } instead of *
 * @todo remove arrow or do ^
 *
 * @todo probably don't use width & border here?
 * @description using hover + active allows for pointer-events + cursor
 */
export const StyledClickBoundary = styled
  .withComponent(ClickBoundaryAdapter)
  .attrs({
    'data-type': 'select-wrap',
    'data-qa': 'qa-dropdown',
  })`
  position: relative;
  width: 100%;
  height: 100%;
  border: $border-thin;
  border-radius: $border-radius;

  ${props => props['aria-disabled'] && styled.css`
    ${disabledStyles};
    border-color: lightgray;
  `};

  /* @too AfterText? */
  .arrow-up,
  .arrow-down {
    min-width: $spacing;
  }
`

/**
 * @todo pass props in for doing transform animation
 * @todo animate bg like menu
 * @note was = styled.withComponent(BaseStyledSelectWrap) `
 */
const StyledSelectWrap = styled.div.attrs({
  className: 'select-wrap',
  'data-qa': 'qa-dropdown-container',
})`
  position: relative;
  padding: 0 0.5rem;

  @tablet-or-smaller() {
    padding: 0;
  }
`