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

interface IStylesProps {
  color: ButtonColor;
  width?: string;
  customColor: CustomColor;
  typeButtonIcon: ButtoniconTypeDesign;
  font: string;
  size: ButtonSize;
  styles?: CSSObject;
  shape: 'square' | 'default' | 'circle';
  haveText: boolean;
}
interface IStylesIconProps {
  haveText: boolean;
}

export const GeneralStyledBtn = styled.button`
  cursor: pointer;
  position:relative ;
  align-items: center;
  background-color: ${({ color, customColor, typeButtonIcon }: IStylesProps) =>
    typeButtonIcon != 'default' ? theme.transparent
      : color === 'custom'
        ? theme[getPrincipalColorFromTheme(customColor)]
        : color === 'primary'
          ? theme.primary
          : theme.secondary};
  border-radius: ${({ shape }: IStylesProps) => (shape === 'default' ? '4px' : (shape === 'circle' ? '90px' : '0'))};
  border: ${({ color, customColor, typeButtonIcon }: IStylesProps) => typeButtonIcon == 'ghost'? 'none' :
    '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, haveText, shape, width }: IStylesProps) => ButtonHeight[size]};
  justify-content: center;
  letter-spacing: 0.5px;
  line-height: 16px;
  width: ${({ haveText, shape, size, width }: IStylesProps) => width ? width : (haveText ? 'fit-content' :
    (shape === 'circle' && (size === 'small') ? '48px' : '64px'))};
  padding: ${({ haveText }: IStylesProps) => haveText ? '8px 24px' : '0'};
  color: ${({ color, customColor, typeButtonIcon }: IStylesProps) => getColorFromButtonIcon(color, customColor, typeButtonIcon)};
  ${({ styles }) => styles}

   &:hover {
    background-color: ${({ color, customColor, typeButtonIcon }: IStylesProps) =>
    typeButtonIcon != 'default' ? theme.transparent
      : color === 'custom'
        ? getOnPrincipalColorFromTheme(customColor)
        : color === 'primary'
          ? theme.primary300
          : theme.secondary300};
    border-color: ${({ color, customColor, typeButtonIcon }: IStylesProps) =>
    typeButtonIcon == 'ghost'? theme.transparent :
    color === 'custom'
      ? getOnPrincipalColorFromTheme(customColor)
      : color === 'primary'
        ? theme.primary300
        : theme.secondary300};
    color: ${({ color, customColor, typeButtonIcon }: IStylesProps) => getOnColorFromButtonIcon(color, customColor, typeButtonIcon)};
    svg{
      fill: ${({ color, customColor, typeButtonIcon }: IStylesProps) => getOnColorFromButtonIcon(color, customColor, typeButtonIcon)};
    }
  }

  &:active {
    border: ${() =>
    '4px solid' + theme.tertiary100};
    color: ${({ color, customColor, typeButtonIcon }: IStylesProps) => getOnColorFromButtonIcon(color, customColor, typeButtonIcon)};
    svg{
      fill: ${({ color, customColor, typeButtonIcon }: IStylesProps) => getOnColorFromButtonIcon(color, customColor, typeButtonIcon)};
    }
  }

  &:disabled {
    background-color: ${theme.neutral200};
    border-radius: ${({ shape }: IStylesProps) => (shape === 'default' ? '4px' : (shape === 'circle' ? '90px' : '0'))};
    border: ${'1px solid ' + theme.neutral400};
    color: ${theme.neutral500};
    svg{
      fill: ${theme.neutral500}
    }
  }
`;

export const IconContainer = styled.div`
${({ haveText }: IStylesIconProps) => haveText ?
    `
    margin-left: 5px;
    margin-right: 5px;
    `
    :
    `
     position: absolute; 
     left: 0; 
     right: 0; 
     margin-left: auto; 
     margin-right: auto; 
     align-items: center;
  `
  }
`;
