import { styled } from 'styleh-components'
import { Button } from 'atoms/Button'
import { LeftArrow } from 'atoms/Icons/ArrowIcon/directions/LeftArrow'
import { RightArrow } from 'atoms/Icons/ArrowIcon/directions/RightArrow'
import { DarkSelectDropDown } from 'presets/DarkSelectDropDown'
import {
  SelectDropDown,
  StyledSelect,
  OptionListWrapper,
  StyledOption,
} from 'molecules/SelectDropDown'
import Text from 'atoms/Text'

/**
 * PaginationWrapper
 */
const PaginationWrapper = styled.div.attrs({
  'data-qa': 'qa-pagination-wrapper',
})`
  display: flex;
  align-items: baseline;
`

/**
 * Page info label
 * Ex: Page 1 of 12
 */
const PageCountText = styled.withComponent(Text)`
  line-height: rem(45);
`

/**
 * ARROWS - left arrow
 */
const LeftArrowIcon = styled.withComponent(LeftArrow)`
  width: rem(10);
`

/**
 * ARROWS - right arrow
 */
const RightArrowIcon = styled.withComponent(RightArrow)`
  width: rem(10);
`

/**
 * Pagination Button extending the Button Component
 */
const PaginationButton = styled.withComponent(Button)`
  background-color: transparent;
  border: none;
  outline: 0;

  ${props =>
    props.isDisabled === true &&
    styled.css`
      opacity: 0.5;
      pointer-events: none;
    `}
`

const LeftPaginationButton = styled.withComponent(PaginationButton).attrs({
  'data-qa': 'qa-prev-trigger',
})`
  padding: rem(10) rem(3);
`

const RightPaginationButton = styled.withComponent(PaginationButton).attrs({
  'data-qa': 'qa-next-trigger',
})`
  padding: rem(10) rem(3);
`

/**
 * Select Dropdown for page item limit selection
 */
const PaginationDropDown = styled.withComponent(DarkSelectDropDown)`
  ${OptionListWrapper} {
    ${StyledOption} {
      padding: 0 rem(6);
      font-size: rem(16);
    }
  }

  span {
    font-size: rem(16);
  }

  width: rem(48);
  margin-right: rem(5);

  ${StyledSelect} {
    height: rem(28);
    padding: 0 rem(6);

    svg {
      width: rem(10);
    }
  }

  .disable-option {
    :hover {
      background: #b5bccc;
      .text {
        color: #9c9494;
      }
    }
  }

`

const CountSection = styled.div.attrs({
  'data-qa': 'qa-page-number-text',
})`
  display: flex;
  font: $font-regular-default;
  font-weight: 500;
  color: #2c2c2c;
  padding-left: rem(6);
`
const StyledPrimaryCount = styled.input.attrs({
  'type': 'number',
  'className': 'count-input',
  'data-qa': 'qa-page-number-input',
})`
  border: 0;
  outline: 0;
  border: solid 1px #A6AFC1;
  border-radius: rem(4);
  width: 1.5rem;
  text-align: center;
  font-size: rem(16);
  margin: 0 rem(8);

  &::-webkit-inner-spin-button {
    display: none;
  }
`

const PrimaryText = styled.withComponent(Text)`
`

const SecondaryText = styled.withComponent(Text)`
`

const StyledSecondaryCount = styled.withComponent(Text)`
  padding: 0 rem(6);
`

export {
  LeftPaginationButton,
  RightPaginationButton,
  LeftArrowIcon,
  RightArrowIcon,
  PaginationDropDown,
  PaginationWrapper,
  PageCountText,
  CountSection,
  StyledPrimaryCount,
  PrimaryText,
  SecondaryText,
  StyledSecondaryCount,
}