import styled, { CSSObject } from 'styled-components';
import { ButtonColor, CustomColor, ButtonSize , ButtonHeight} from '../ButtonProps';
import {
  getPrincipalColorFromTheme,
  getColorFromTheme,
  getOnPrincipalColorFromTheme,
} from '../ButtonHelpers';
import { theme } from 'data/dataMx';

interface IStylesProps {
  color: ButtonColor;
  width: string;
  customColor: CustomColor;
  font: string;
  size: ButtonSize;
  styles?: CSSObject;
}

export const GeneralStyledButton = styled.button`
  ${({ styles }) => styles}
  cursor: pointer;
  align-items: center;
  background-color: ${({ color, customColor }: IStylesProps) =>
    color === 'custom'
      ? theme[getPrincipalColorFromTheme(customColor)]
      : color === 'primary'
        ? theme.primary
        : theme.secondary};
  border-radius: 4px;
  border: ${({ color, customColor }: IStylesProps) =>
    '2px solid ' +
    (color === 'custom'
      ? theme[getPrincipalColorFromTheme(customColor)]
      : color === 'primary'
        ? theme.primary
        : theme.secondary)};
  display: flex;
  font-size: ${({ size }: IStylesProps) => size === 'small' ? '12px' : '16px'};
  font-weight: 700;
  font-family: ${({ font }: IStylesProps) => font};
  height: ${({ size }: IStylesProps) => ButtonHeight[size]};
  justify-content: center;
  letter-spacing: 0.5px;
  line-height: 16px;
  width: ${({ width }: IStylesProps) => width};
  padding: 8px 24px;
  color: ${({ color, customColor }: IStylesProps) =>
    color === 'custom'
      ? theme[getColorFromTheme(customColor)]
      : theme.neutral100};

  &:hover {
    background-color: ${({ color, customColor }: IStylesProps) =>
    color === 'custom'
      ? getOnPrincipalColorFromTheme(customColor)
      : color === 'primary'
        ? theme.primary300
        : theme.secondary300};
    border: ${({ color, customColor }: IStylesProps) =>
    '2px solid' +
    (color === 'custom'
      ? getOnPrincipalColorFromTheme(customColor)
      : color === 'primary'
        ? theme.primary300
        : theme.secondary300)};
  }

  &:active {
    border: ${`4px solid ${theme.tertiary100}`};
  }
  
  &:disabled {
    background-color: ${theme.neutral200};
    border-radius: 4px;
    border: ${`1px solid ${theme.neutral400}`};
    color: ${theme.neutral500};
  }
`;
