import styled from 'styled-components';

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

const getColor = (theme: ThemeObject, color: keyof ThemeObject['pallet'], withOpacity = false, customColor?: string) => {
  const isDarkTheme = theme.type === 'dark';
  const hexOpacity = isDarkTheme ? '4D' : 16; // 4D - 30%, 16 - 10%;
  const c = customColor ?? theme.pallet[color];
  return `${c}${withOpacity ? hexOpacity : ''}`;
};

const getBoxShadow = (theme: ThemeObject, selected: boolean, hover = false) => {
  if (!selected) return 'none';
  return `0px 5px ${hover ? 45 : 25}px 0px ${theme.background.shadow}`;
};

export const StyledTag = styled.div.attrs(
  (props: { $theme: ThemeObject; $color: keyof ThemeObject['pallet']; $customColor?: string }) => ({
    $theme: props.$theme,
    $color: props.$color,
    $customColor: props.$customColor,
  })
)`
  background: ${(props) => getColor(props.$theme, props.$color, true, props.$customColor)};
  color: ${(props) => getColor(props.$theme, props.$color, false, props.$customColor)};
  transition: all 0.25s;
  :hover {
    background-color: 
    -webkit-box-shadow: ${(props) => getBoxShadow(props.$theme, !!props.onClick, true)};
    -moz-box-shadow: ${(props) => getBoxShadow(props.$theme, !!props.onClick, true)};
    box-shadow: ${(props) => getBoxShadow(props.$theme, !!props.onClick, true)};
  }
  :active {
    transform: scale(0.9);
  }
`;
