import React from 'react'
import { styled } from 'styleh-components'
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}`}
  />
)

export const StyledOptionList = styled.withComponent(OptionList) `
  /* todo - dropdown absolute positioning top/bottom */
  ${props =>
    props.shouldBeAbsolute &&
    styled.css `
      position: absolute;
      z-index: 3;
      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: $spacing-extra-small;

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

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