import styled from 'styled-components';

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

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

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

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

export const StyledSecondaryIcon = styled.div.attrs((props: { $theme: ThemeObject; $selected?: boolean }) => ({
  $theme: props.$theme,
  $selected: props.$selected,
}))`
  color: ${(props) => (props.$selected ? props.$theme?.pallet.primaryColor : props.$theme?.text.secondary)};
`;

export const StyledAnchor = styled.a.attrs((props: { $theme: ThemeObject; $selected: boolean; $disabled: boolean }) => ({
  $theme: props.$theme,
  $selected: props.$selected,
  $disabled: props.$disabled,
}))`
  cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
  opacity: ${(props) => (props.$disabled ? 0.5 : 1)};
  color: ${(props) => getColor(props.$theme, props.$selected)};
  path {
    fill: ${(props) => getFillColor(props.$theme, props.$selected)};
  }
  :hover {
    color: ${(props) => getHoverColor(props.$theme, props.$disabled)} !important;
    path {
      fill: ${(props) => getHoverColor(props.$theme, props.$disabled)};
    }
  }
  :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 StyledInput = styled.input.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.main};
  ::placeholder {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
  ::-webkit-input-placeholder {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
  ::-ms-input-placeholder {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
  transition: all 0.25s;
`;

export const StyledLightBackgroundWrapper = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  background: ${(props) => props.$theme.background.light};
  transition: all 0.35s;
`;

export { StyledParagraph, StyledMainText } from './styled-paragraph';
