import React from 'react'
import { styled } from 'styleh-components'
import { Button } from 'atoms/Button'
import { DarkSelectDropDown } from 'presets/DarkSelectDropDown'
import Text from 'atoms/Text'

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

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

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

  ${props =>
    props.isDisabled === true &&
    styled.css`
      opacity: 0.5;
      svg {
        cursor: not-allowed;
      }
    `}
`

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)`
  span {
    font-size: rem(16);
  }

  margin-right: rem(5);

  .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: var(--color-black);
  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 var(--color-light-grey);
  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 = Text

const SecondaryText = Text

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

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