import styled from 'styled-components';

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

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

const getSelectedPointColor = (theme: ThemeObject, isSelected: boolean, isSubItem: boolean): string => {
  const { pallet } = theme;
  if (isSelected) {
    return isSubItem ? pallet.secondaryColor : pallet.primaryColor;
  }
  return 'transparent';
};

const getFillColor = (theme: ThemeObject): string => {
  const { text } = theme;
  return text.secondary;
};

const getHoverColor = (theme: ThemeObject, disabled: boolean): string => {
  if (disabled) return 'auto';
  return theme.active ?? theme.pallet.primaryColor;
};

export const StyledAnchor = styled.a.attrs(
  (props: { $theme: ThemeObject; $selected: boolean; $disabled: boolean; className?: string }) => ({
    $theme: props.$theme,
    $selected: props.$selected,
    $disabled: props.$disabled,
    className: props.className,
  })
)`
  cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
  opacity: ${(props) => (props.$disabled ? 0.5 : 1)};
  color: ${(props) => getSelectedColor(props.$theme, props.$selected, false, props.className === 'sidebar__subitem')};
  path {
    fill: ${(props) => getFillColor(props.$theme)};
  }
  :hover {
    color: ${(props) => getHoverColor(props.$theme, props.$disabled)} !important;
    path {
      fill: ${(props) => getHoverColor(props.$theme, props.$disabled)};
    }
  }
  :before {
    background: ${(props) => getSelectedPointColor(props.$theme, props.$selected, props.className === 'sidebar__subitem')};
  }
`;

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};
  }
`;
