import React from 'react';
import Pagination from '@digigov/react-core/Pagination';
import PaginationLabelContainer, {
  PaginationLabelContainerProps,
} from '@digigov/react-core/PaginationLabelContainer';
import PaginationListItem from '@digigov/react-core/PaginationListItem';
import ChevronIcon from '@digigov/react-icons/ChevronIcon';
import Button from '@digigov/ui/form/Button';
import LabelContainer, {
  LabelContainerProps,
} from '@digigov/ui/form/LabelContainer';
import SelectContainer, {
  SelectOption,
} from '@digigov/ui/form/SelectContainer';
import { I18nText } from '@digigov/ui/i18n/I18nText';

export default Pagination;

export interface PaginationLabelProps extends PaginationLabelContainerProps {
  /**
   * Use start to set the value of the start point of the results shown.
   */
  start: number;
  /**
   * Use end to set the value of the end point of the results shown.
   */
  end: number;
  /**
   * Use total to set the value of the total results.
   */
  total: number;
}
export interface PaginationResultsPerPageSelectProps
  extends LabelContainerProps {
  resultsPerPageOptions: number[];
  currentResultsPerPage: number;
  handleOnChange: React.Dispatch<React.SetStateAction<number>>;
}

export interface PaginationListItemButtonProps {
  arrow?: 'left' | 'right';
  children?: string | number;
  variant?: 'number' | 'dots';
  active?: boolean;
  onClick?: (e: any) => void;
  isCurrentPage?: boolean;
  tabIndex?: number;
}
/**
 * PaginationLabel component is used for placing the pagination results label.
 */
export const PaginationLabel = React.forwardRef<
  HTMLParagraphElement,
  PaginationLabelProps
>(function PaginationLabel(
  { start, end, total },
  ref: React.Ref<HTMLParagraphElement>
) {
  return (
    <PaginationLabelContainer ref={ref}>
      <I18nText i18nKey="pagination.label">
        Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> results
      </I18nText>
    </PaginationLabelContainer>
  );
});

export const PaginationResultsPerPageSelect = React.forwardRef<
  HTMLLabelElement,
  PaginationResultsPerPageSelectProps
>(function PaginationResultsPerPageSelect(
  { resultsPerPageOptions, currentResultsPerPage, handleOnChange, children },
  ref: React.Ref<HTMLLabelElement>
) {
  return (
    <LabelContainer ref={ref}>
      {children}
      <SelectContainer
        dense
        value={currentResultsPerPage}
        onChange={(e) => {
          handleOnChange(Number(e.target.value));
        }}
      >
        {resultsPerPageOptions.map((option, index) => (
          <SelectOption key={index}>{option}</SelectOption>
        ))}
      </SelectContainer>
    </LabelContainer>
  );
});

export const PaginationListItemButton = React.forwardRef<
  HTMLLIElement,
  PaginationListItemButtonProps
>(function PaginationListItemButton(
  { onClick, arrow, children, variant, active, isCurrentPage, tabIndex },
  ref: React.Ref<HTMLLIElement>
) {
  return (
    <>
      <PaginationListItem
        tabIndex={tabIndex}
        active={active} //disabled
        currentPage={isCurrentPage}
        ref={ref}
        variant={variant}
      >
        {isCurrentPage ? (
          children
        ) : (
          <Button variant="link" onClick={onClick}>
            {arrow === 'left' && <ChevronIcon direction={arrow} />}
            {children}
            {arrow === 'right' && <ChevronIcon direction={arrow} />}
          </Button>
        )}
      </PaginationListItem>
    </>
  );
});