/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';
import { darken } from 'polished';

import Chip, { ChipProps } from '@material-ui/core/Chip';
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 : ''}`;
};

export const StyledChip = styled(
  (props: ChipProps & { $theme: ThemeObject; $color: keyof ThemeObject['pallet']; $customColor?: string; $active?: boolean }) => (
    <Chip {...props} />
  )
)`
  && {
    color: ${(props) =>
      props.variant === 'default' ? props.$theme.text.main : getColor(props.$theme, props.$color, false, props.$customColor)};
    border: 1px solid ${(props) => getColor(props.$theme, props.$color, false, props.$customColor)};
    background: ${(props) =>
      darken(props.$active ? 0.05 : 0, getColor(props.$theme, props.$color, props.variant === 'outlined', props.$customColor))};
    :focus {
      background: ${(props) =>
        darken(0.05, getColor(props.$theme, props.$color, props.variant === 'outlined', props.$customColor))};
    }
  }
`;
