import styled from 'styled-components';

import { ThemeObject } from '../Theme';

const getColor = (theme: ThemeObject, isSelected: boolean): string => {
  const { active, text } = theme;
  if (isSelected) {
    return active ?? theme.pallet.primaryColor;
  }
  return active ? text.secondary : text.main;
};

const getHoverColor = (theme: ThemeObject): string => {
  return theme.active ?? theme.pallet.primaryColor;
};

export const StyledAnchor = styled.a.attrs((props: { $theme: ThemeObject; $selected: boolean }) => ({
  $theme: props.$theme,
  $selected: props.$selected,
}))`
  color: ${(props) => getColor(props.$theme, props.$selected)};
  fill: ${(props) => getColor(props.$theme, props.$selected)};
  stroke: ${(props) => getColor(props.$theme, props.$selected)};
  :hover {
    color: ${(props) => getHoverColor(props.$theme)};
    fill: ${(props) => getHoverColor(props.$theme)};
    stroke: ${(props) => getHoverColor(props.$theme)};
  }
  :before {
    background: ${(props) => getColor(props.$theme, props.$selected)};
  }
`;

export const StyledDivCounter = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.secondary};
  fill: ${(props) => props.$theme.text.secondary};
  stroke: ${(props) => props.$theme.text.secondary};
`;

export const StyledRoundSideBarCounter = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  background: ${(props) => props.$theme.pallet.error};
`;

export const StyledIconButton = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.main};
  fill: ${(props) => props.$theme.text.main};
  stroke: ${(props) => props.$theme.text.main};
  transition: all 0.25s;
  :hover {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
`;

export const StyledTitle = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.main};
  fill: ${(props) => props.$theme.text.main};
  stroke: ${(props) => props.$theme.text.main};
  transition: all 0.25s;
  :hover {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
`;
