import React from 'react'
import { Flex, Text } from '@chakra-ui/react'
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'react-feather'
import type { BaseAnalytic } from '../../../integration/analytics'
import { pushAnalytics } from '../../../integration/analytics/utils'
import { EventNameEnum, WidgetTypeEnum } from '../../../integration/analytics'
import { TableIconButton } from './styles'

type BottonProps = {
  analytics?: BaseAnalytic
  resourceName: string
  pageIndex: number
  canPreviousPage: boolean
  canNextPage: boolean
  pageOptions: Array<number>
  pageCount: number
  gotoPage: Function
  nextPage: Function
  previousPage: Function
}

const Bottom = (props: BottonProps): JSX.Element => {
  const {
    resourceName,
    pageIndex,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
  } = props

  return (
    <Flex
      borderTopWidth="1px"
      overflowX="hidden"
      overflowY="hidden"
      p={4}
      bg="white"
      roundedBottomLeft={4}
      roundedBottomRight={4}
      justifyContent="space-between"
      flexDirection="row"
    >
      <Flex flexDirection="row">
        <TableIconButton
          mr={2}
          onClick={() => {
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_first_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: undefined,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            gotoPage(0)
          }}
          isDisabled={!canPreviousPage}
          icon={<ChevronsLeft size={20} />}
        />
        <TableIconButton
          mr={2}
          isDisabled={!canPreviousPage}
          onClick={() => {
            previousPage()
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_previous_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: pageIndex - 1,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
          }}
          icon={<ChevronLeft size={20} />}
        />
      </Flex>
      <Flex justifyContent="center" alignItems="center">
        <Text mr={4}>
          Страница{' '}
          <strong>
            {pageIndex + 1} из {pageOptions.length}
          </strong>{' '}
        </Text>
      </Flex>
      <Flex flexDirection="row">
        <TableIconButton
          ml={2}
          isDisabled={!canNextPage}
          onClick={() => {
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_next_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: pageIndex + 1,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            nextPage()
          }}
          icon={<ChevronRight size={20} />}
        />
        <TableIconButton
          ml={2}
          onClick={() => {
            const lastPage = pageCount ? pageCount - 1 : 1
            pushAnalytics({
              eventName: EventNameEnum.BUTTON_CLICK,
              widgetName: 'table_pagination_goto_last_page',
              widgetType: WidgetTypeEnum.PAGINATION,
              value: lastPage,
              resource: resourceName,
              viewType: 'list_view',
              ...props,
            })
            gotoPage(lastPage)
          }}
          isDisabled={!canNextPage}
          icon={<ChevronsRight size={20} />}
        />
      </Flex>
    </Flex>
  )
}

export { Bottom }