import React from 'react'
import { Select } from 'antd'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const { Option } = Select

const ItemsPerPageSection = () => {
  const {
    ordersPerPage,
    totaOrderNumber,
    setOrdersPerPage,
    t
  } = useArchivedOrder()
  return (
    <div className='item-per-page'>
      <span className='arcm-text-base arcm-mr-2'>
        {t('showing_orders')
          .replace(
            '%1$s',
            parseInt(ordersPerPage) > parseInt(totaOrderNumber)
              ? totaOrderNumber
              : ordersPerPage
          )
          .replace('%2$s', totaOrderNumber)}
      </span>
      <Select
        defaultValue={10}
        onChange={value => setOrdersPerPage(value)}
        className=' arcm-flex-grow arcm-text-black arcm-text-sm arcm-font-normal'
      >
        <Option value='10'>10</Option>
        <Option value='20'>20</Option>
        <Option value='50'>50</Option>
        <Option value='100'>100</Option>
        <Option value='250'>250</Option>
        <Option value='500'>500</Option>
      </Select>
    </div>
  )
}

export default ItemsPerPageSection