import { buttonBaseClasses } from '@mui/material/ButtonBase'
import MuiPagination, { PaginationProps as MuiPaginationProps, paginationClasses } from '@mui/material/Pagination'
import MuiPaginationItem, { paginationItemClasses } from '@mui/material/PaginationItem'
import styled, { useTheme } from 'styled-components'

import { Icon, useIsLargerThanPhone } from './index.js'

type InternalPaginationProps = {
  'data-testid'?: string
}
type PaginationProps = Pick<MuiPaginationProps, 'className' | 'count' | 'disabled' | 'onChange' | 'page'> &
  InternalPaginationProps

const _Pagination = ({
  'data-testid': dataTestId = '',
  className,
  count,
  disabled,
  onChange,
  page,
}: PaginationProps) => {
  const theme = useTheme()
  const isDesktop = useIsLargerThanPhone()

  return (
    <MuiPagination
      className={className}
      count={count}
      data-testid={dataTestId ? `pagination ${dataTestId}` : 'pagination'}
      disabled={disabled}
      onChange={onChange}
      page={page}
      shape="rounded"
      siblingCount={isDesktop ? 1 : 0}
      sx={{
        // centers the pagination
        [`&.${paginationClasses.root}`]: {
          display: 'flex',
          justifyContent: 'center',
        },
        // pagination item style overrides
        [`& .${paginationItemClasses.root}`]: {
          borderRadius: '8px',
          color: theme.navNeutral400,
          fontFamily: theme.fontPrimary,
        },
        // selected pagination item button style overrides
        [`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}`]: {
          backgroundColor: `${theme.navPrimary} !important`,
          color: `${theme.navNeutralLight} !important`,
        },
        // disabled selected pagination item button style overrides
        [`& .${buttonBaseClasses.root}.${paginationItemClasses.selected}.${paginationItemClasses.disabled}`]: {
          opacity: 0.38,
        },
      }}
      renderItem={(item) => (
        <MuiPaginationItem
          slots={{
            previous: () => <Icon name="actions/carrot-left" size="16" />,
            next: () => <Icon name="actions/carrot-right" size="16" />,
          }}
          {...item}
        />
      )}
    />
  )
}

export const Pagination = styled(_Pagination)``