import { styled } from 'styleh-components'
import { snapback } from 'features/Animations'
import { Image } from 'atoms/Image'
import { disabledStyles } from '../meta/styled'

/**
 * @todo needs update on handling margin for container
 */
interface StyledOptionProps {
  length?: number
  isDisabled?: boolean
  isSelected?: boolean
  // isVisible?: boolean
}

export const StyledOption = styled.div `
  ${snapback + ''};
  width: 100%;
  align-items: center;
  display: flex;

  /* probably not needed */
  font-size: rem(13);
  color: $colors-grey;
  > span {
    color: inherit;
  }
  &:last-child {
    order: -1;
  }
  span {
    color: $colors-black;
  }

  /* @todo */
  height: rem(47);
  padding: 0 $spacing;

  cursor: pointer;
  user-select: none;

  background: transparent;
  ${(props: StyledOptionProps) =>
    props.isSelected &&
    styled.css `
      background: #efefef;
    `};

  transition: background 0.48s, color 0.12s, padding 0.24s, margin 0.24s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.48s;
  animation-direction: alternate;
  animation-fill-mode: forwards;

  /* only if not disabled... */
  &:hover {
    background: $colors-actionblue;
    color: white;
    animation: snapback;
    .text {
      color: $colors-white;
    }
  }

  ${(props: StyledOptionProps) => props.isDisabled && disabledStyles};
  ${(props: StyledOptionProps) =>
    props.isDisabled &&
    styled.css `
      color: lightgray;
      > button,
      > span,
      > a,
      > div {
        color: lightgray;
      }

      &:hover {
        color: lightgray;
        .text {
          color: lightgray;
        }
      }
    `};
`

/**
 * @todo use `atoms/Text`
 */
export const SelectText = styled.span.className('text') `
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  // color: $colors-blackrabbit;
  letter-spacing: 0;
  font: $font-regular-default;
  @tablet-or-smaller() {
    @font (16, regular);
  }
  @phone-or-smaller() {
    @font (14, regular);
  }
`