import styled, { css } from 'styled-components';
import { getSpacing, getColorAlias, getDefaultTransition, getFontSize, getModifiedColorByThemeMode, getLightenColor, getDarkenColor } from '../../utils/index.js';

const PaginationControl = styled.nav `
  display: flex;
  align-items: center;
  gap: ${getSpacing('s02')};
  justify-content: ${({ alignment }) => {
    if (alignment === 'center') {
        return 'center';
    }
    else if (alignment === 'left') {
        return 'flex-start';
    }
    else if (alignment === 'right') {
        return 'flex-end';
    }
}};
`;
const PaginationButton = styled.button `
  --pagination-button-bg-color: transparent;
  --pagination-button-font-color: ${getColorAlias('contentInteractiveSecondary')};
  ${getDefaultTransition()}
  ${getFontSize('size14')}
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  min-width: ${getSpacing('s06')};
  min-height: ${getSpacing('s06')};
  width: ${getSpacing('s06')};
  height: ${getSpacing('s06')};
  outline-offset: 2px;
  background-color: var(--pagination-button-bg-color);
  color: var(--pagination-button-font-color);

  &:hover {
    --pagination-button-bg-color: ${getModifiedColorByThemeMode('hover01', 'interactiveSecondary')};
  }
  &:active {
    --pagination-button-bg-color: ${getModifiedColorByThemeMode('active01', 'interactiveSecondary')};
  }

  &:focus {
    outline: 2px solid ${getColorAlias('focusOuter')};
  }

  &[data-active=\"true\"] {
    --pagination-button-bg-color: ${getColorAlias('contentInteractiveSecondary')};
    --pagination-button-font-color: ${getColorAlias('contentInteractivePrimary')};

    ${({ theme }) => {
    return theme.mode === 'light'
        ? css `
            &:hover {
              --pagination-button-bg-color: ${getLightenColor('hover01', 'contentInteractiveSecondary')};
            }
            &:active {
              --pagination-button-bg-color: ${getLightenColor('active01', 'contentInteractiveSecondary')};
            }
          `
        : css `
            &:hover {
              --pagination-button-bg-color: ${getDarkenColor('hover01', 'contentInteractiveSecondary')};
            }
            &:active {
              --pagination-button-bg-color: ${getDarkenColor('active01', 'contentInteractiveSecondary')};
            }
          `;
}}
  }
`;
const Ellipsis = styled.span `
  ${getFontSize('size12')}
  color: ${getColorAlias('contentDefault')};
`;
const PaginationText = styled.span `
  ${getFontSize('size16')}
  color: ${getColorAlias('contentInteractiveSecondary')};
`;

export { Ellipsis, PaginationButton, PaginationControl, PaginationText };
