import { observer } from 'mobx-react';
import React from 'react';
import { View } from './View';
import { Button } from './Button';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from './component.interfaces';
import { IoIosArrowDropleft, IoIosArrowDropright } from 'react-icons/io';
import { BiFastForwardCircle, BiRewindCircle } from 'react-icons/bi';
import { Text } from './Text';
import { useApphouse } from '..';
/**
 * Styles for the Pagination component.
 */
export interface PaginationStyles {
  nav?: CSSProperties;
  ul?: CSSProperties;
  li?: CSSProperties;
}

/**
 * Props for the Pagination component.
 */
export interface PaginationProps extends ApphouseComponent<PaginationStyles> {
  /**
   * The current page number.
   */
  currentPage: number;
  /**
   * The total number of pages.
   */
  totalPages: number;
  /**
   * Callback function invoked when a page is changed.
   *
   * @param pageNumber - The selected page number.
   */
  onPageChange: (pageNumber: number) => void;
  /**
   * If true, the next button will be disabled.
   * if showPrevNext is false, this prop will block next buttons to be clicked
   * @default false
   */
  disableNext?: boolean;
  /**
   * if true, the pagination will be hidden when there is only one page
   * @default false
   */
  hideWhenOnePage?: boolean;

  /**
   * the size of the page
   */
  pageSize?: number;
}

export const PagePagination: React.FC<PaginationProps> = observer(
  ({
    currentPage,
    totalPages,
    onPageChange,
    disableNext = false,
    hideWhenOnePage = false,
    pageSize
  }) => {
    const { theme } = useApphouse();
    if (hideWhenOnePage && totalPages === 1) {
      return null;
    }
    const iconSize = theme.tokens.iconSize.m;

    const showPrev = currentPage > 1;
    const showNext = currentPage < totalPages;
    const showPageSkipPrevious = pageSize && currentPage > pageSize;
    const buttonsWidth = 80;
    return (
      <View width="100%">
        <View
          width={buttonsWidth}
          orientation="horizontal"
          justifyContent="flex-end"
        >
          <View width={buttonsWidth / 2.8} justifyContent="flex-end">
            {showPrev && (
              <Button
                variant={'clear'}
                onClick={() => onPageChange(currentPage - 1)}
                gutters={0}
              >
                <Text>
                  <IoIosArrowDropleft size={iconSize} />
                </Text>
              </Button>
            )}
          </View>

          {showPageSkipPrevious && (
            <View width={buttonsWidth / 2.8} justifyContent="flex-end">
              <Button
                variant={'clear'}
                disabled={currentPage === totalPages || disableNext}
                onClick={() => {
                  if (currentPage < totalPages + pageSize) {
                    onPageChange(currentPage - pageSize);
                  }
                }}
                gutters={0}
                styleOverwrites={{
                  color: 'inherit'
                }}
              >
                <Text>
                  <BiRewindCircle size={iconSize} />
                </Text>
              </Button>
            </View>
          )}
        </View>

        <Text>
          {currentPage}/{totalPages}
        </Text>

        <View width={buttonsWidth} orientation="horizontal">
          <View width={buttonsWidth / 2.8} justifyContent="flex-start">
            {pageSize && (
              <Button
                variant={'clear'}
                disabled={currentPage > totalPages - pageSize || disableNext}
                onClick={() => {
                  if (currentPage < totalPages - pageSize) {
                    onPageChange(currentPage + pageSize);
                  }
                }}
                gutters={0}
                styleOverwrites={{
                  color: 'inherit'
                }}
              >
                <Text>
                  <BiFastForwardCircle size={iconSize} />
                </Text>
              </Button>
            )}
          </View>
          <View width={buttonsWidth / 2.8} justifyContent="flex-start">
            {showNext && (
              <Button
                variant={'clear'}
                disabled={currentPage === totalPages || disableNext}
                onClick={() => {
                  if (currentPage < totalPages) {
                    onPageChange(currentPage + 1);
                  }
                }}
                gutters={0}
                styleOverwrites={{
                  color: 'inherit'
                }}
              >
                <Text>
                  <IoIosArrowDropright size={iconSize} />
                </Text>
              </Button>
            )}
          </View>
        </View>
      </View>
    );
  }
);